vue組件watch屬性實例講解
更新時間:2017年11月07日 08:48:58 作者:匿名的girl
這篇文章主要為大家詳細介紹了vue組件watch屬性實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue組件watch屬性的具體代碼,供大家參考,具體內(nèi)容如下
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>wacth屬性</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
data:function(){
return {
myInput:"",
myPhone:123456
}
},
template:`
<div>
<input type="text" v-model="myInput"/>
<input type="text" v-model="myPhone"/>
<span>{{myInput}}</span>
</div>
`,
watch:{
myInput:function(){
//當(dāng)數(shù)據(jù)發(fā)生變化、執(zhí)行的操作
console.log("數(shù)據(jù)改變");
},
myPhone:function(){
console.log(this.myPhone);
}
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中mixins的使用方法以及實際項目應(yīng)用指南
vue中提供了一種混合機制--mixins,用來更高效的實現(xiàn)組件內(nèi)容的復(fù)用,下面這篇文章主要給大家介紹了關(guān)于Vue中mixins的使用方法以及實際項目應(yīng)用指南,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的簡單示例
在vue項目中難免遇到有要生成條形碼或者二維碼的功能需求,下面這篇文章主要給大家介紹了關(guān)于vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-12-12
Vue中使用Element UI的Table組件實現(xiàn)嵌套表格功能
這篇文章主要介紹了Vue中使用Element UI的Table組件實現(xiàn)嵌套表格功能,演示如何在Vue中使用Element UI的Table組件實現(xiàn)嵌套表格,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
vue實現(xiàn)定時刷新數(shù)據(jù),每隔5分鐘執(zhí)行一次
這篇文章主要介紹了vue實現(xiàn)定時刷新數(shù)據(jù),每隔5分鐘執(zhí)行一次問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01
vue項目如何監(jiān)聽localStorage或sessionStorage的變化
這篇文章主要介紹了vue 項目如何監(jiān)聽localStorage或sessionStorage的變化,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2021-01-01
詳解從Vue.js源碼看異步更新DOM策略及nextTick
本篇文章主要介紹了從Vue.js源碼看異步更新DOM策略及nextTick,具有一定的參考價值,感興趣的小伙伴們可以參考一2017-10-10

