Vue中watch和methods兩種屬性的作用
vue中watch是專門用來(lái)觀察和響應(yīng)vue實(shí)例上的數(shù)據(jù)變動(dòng)的，語(yǔ)法如下：
watch: {
被監(jiān)聽(tīng)的數(shù)據(jù): {
handler(數(shù)據(jù)改變后的值, 數(shù)據(jù)改變之前的值) {
相關(guān)代碼邏輯
}
}
}
- 被監(jiān)聽(tīng)的數(shù)據(jù)：data中定義的數(shù)據(jù)；
- 數(shù)據(jù)改變后的值：新值；
- 數(shù)據(jù)改變之前的值：舊值；
1、普通數(shù)據(jù)類型實(shí)例
<input type="text" v-model="userName"/>
//監(jiān)聽(tīng)當(dāng)userName值發(fā)生變化時(shí)觸發(fā)
watch: {
userName (newName, oldName) {
console.log(newName)
}
}
//或
watch: {
userName: {
handler (newName, oldName) {
console.log(newName)
},
immediate: true
}
}
注意：當(dāng)值第一次綁定的時(shí)候不會(huì)執(zhí)行監(jiān)聽(tīng)函數(shù)，只有當(dāng)值改變的時(shí)候才會(huì)執(zhí)行。如果我們想在第一次綁定的時(shí)候執(zhí)行此監(jiān)聽(tīng)函數(shù)，則需要設(shè)置immediate為true。
2、對(duì)象類型實(shí)例
<input type="text" v-model="cityName.name" />
data (){
return {
cityName: {name:'北京'}
}
},
watch: {
cityName: {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}
注意：當(dāng)需要監(jiān)聽(tīng)對(duì)象的改變時(shí)，此時(shí)就需要設(shè)置deep為true。
vue中methods是方法屬性，在里面定義方法，語(yǔ)法如下：
methods:{
//在此處定義方法
方法名1() {
},
方法名2() {
}
}
實(shí)例
<button class="btn btn-primary" @click="doAdd">添加</button>
methods : {
//這里面定義了一個(gè)doAdd的方法.
doAdd() {
console.log(“hello”);
//通過(guò)axios發(fā)送請(qǐng)求
axios.get(url).then(response =>{
console.log(response.data);
});
}
}
}
到此這篇關(guān)于Vue中watch和methods兩種屬性的作用的文章就介紹到這了,更多相關(guān)Vue watch和methods內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue中銷毀定時(shí)器的幾種解決方案,銷毀定時(shí)器的操作一般是在beforeDestroy鉤子中進(jìn)行，根據(jù)定時(shí)器的數(shù)量不同可以有多種解決方法,需要的朋友可以參考下2023-08-08
關(guān)于antd-vue?a-menu菜單綁定路由的相關(guān)問(wèn)題
這篇文章主要介紹了關(guān)于antd-vue?a-menu菜單綁定路由的相關(guān)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue項(xiàng)目代碼格式規(guī)范設(shè)置參考指南
這篇文章主要給大家介紹了關(guān)于vue3簡(jiǎn)單封裝input組件和統(tǒng)一表單數(shù)據(jù)的相關(guān)資料,不管你學(xué)習(xí)哪一門編程語(yǔ)言,相信大家都會(huì)略化這一部分,需要的朋友可以參考下2022-05-05
Vue無(wú)后端配合實(shí)現(xiàn)導(dǎo)出功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何在無(wú)后端配合的情況下實(shí)現(xiàn)導(dǎo)出功能,文中的示例代碼簡(jiǎn)潔易懂,有需要的小伙伴可以跟隨小編一起了解一下2024-01-01
本文通過(guò)實(shí)例代碼給大家介紹了Vue表單demo v-model雙向綁定問(wèn)題,代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
VUEJS實(shí)戰(zhàn)之利用laypage插件實(shí)現(xiàn)分頁(yè)（3）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之修復(fù)錯(cuò)誤并且美化時(shí)間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
Vue實(shí)現(xiàn)漸變色進(jìn)度條的代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)漸變色進(jìn)度條的代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了派發(fā)器抽離vue2單組件中的大量邏輯技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue實(shí)現(xiàn)微信二次分享以及自定義分享的示例
這篇文章主要介紹了vue實(shí)現(xiàn)微信二次分享以及自定義分享的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
element滾動(dòng)條組件el-scrollbar的使用詳解
本文主要介紹了element滾動(dòng)條組件el-scrollbar的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04