vue組件watch屬性實(shí)例講解
更新時(shí)間：2017年11月07日 08:48:58 作者：匿名的girl
這篇文章主要為大家詳細(xì)介紹了vue組件watch屬性實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue.js中關(guān)于偵聽(tīng)器（watch）的高級(jí)用法示例
- Vue數(shù)據(jù)監(jiān)聽(tīng)方法watch的使用
- vue watch監(jiān)聽(tīng)對(duì)象及對(duì)應(yīng)值的變化詳解
- 關(guān)于vue中watch檢測(cè)到不到對(duì)象屬性的變化的解決方法
- vue進(jìn)行圖片的預(yù)加載watch用法實(shí)例講解
- vue watch自動(dòng)檢測(cè)數(shù)據(jù)變化實(shí)時(shí)渲染的方法
- 淺談 vue 中的 watcher
- Vue2.0用 watch 觀察 prop 變化(不觸發(fā))
- 詳解vue2 $watch要注意的問(wèn)題
- 詳解Vue中watch的高級(jí)用法
相關(guān)文章
Vue中mixins的使用方法以及實(shí)際項(xiàng)目應(yīng)用指南
vue中提供了一種混合機(jī)制--mixins,用來(lái)更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用,下面這篇文章主要給大家介紹了關(guān)于Vue中mixins的使用方法以及實(shí)際項(xiàng)目應(yīng)用指南,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的簡(jiǎn)單示例
在vue項(xiàng)目中難免遇到有要生成條形碼或者二維碼的功能需求,下面這篇文章主要給大家介紹了關(guān)于vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了Vue編程三部曲之將template編譯成AST示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vuejs中的watch實(shí)例詳解(監(jiān)聽(tīng)者)
本文通過(guò)實(shí)例代碼給大家介紹了Vuejs中的watch，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-01-01
這篇文章主要為大家詳細(xì)介紹了3種vue組件的書(shū)寫形式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能
這篇文章主要介紹了Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能,演示如何在Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue實(shí)現(xiàn)定時(shí)刷新數(shù)據(jù),每隔5分鐘執(zhí)行一次
這篇文章主要介紹了vue實(shí)現(xiàn)定時(shí)刷新數(shù)據(jù),每隔5分鐘執(zhí)行一次問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue項(xiàng)目如何監(jiān)聽(tīng)localStorage或sessionStorage的變化
這篇文章主要介紹了vue 項(xiàng)目如何監(jiān)聽(tīng)localStorage或sessionStorage的變化，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
詳解從Vue.js源碼看異步更新DOM策略及nextTick
本篇文章主要介紹了從Vue.js源碼看異步更新DOM策略及nextTick，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一2017-10-10
vue觸發(fā)真實(shí)的點(diǎn)擊事件跟用戶行為一致問(wèn)題
這篇文章主要介紹了vue觸發(fā)真實(shí)的點(diǎn)擊事件跟用戶行為一致問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03