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