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后臺返回格式為二進(jìn)制流進(jìn)行文件的下載方式
這篇文章主要介紹了vue后臺返回格式為二進(jìn)制流進(jìn)行文件的下載方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06
vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue-element-admin開發(fā)教程(v4.0.0之后)
由于vue-element-admin的架構(gòu)再4.0.0版本后做了重構(gòu),整體結(jié)構(gòu)上和之前的還是很相似的,但是也有些變化,本文就介紹vue-element-admin開發(fā)教程(v4.0.0之后),感興趣的可以了解一下2022-04-04
vue(element ui)使用websocket及心跳檢測方式
這篇文章主要介紹了vue(element ui)使用websocket及心跳檢測方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue2與Vue3如何利用install自定義全局確認(rèn)框組件編寫
這篇文章主要介紹了Vue2與Vue3如何利用install自定義全局確認(rèn)框組件編寫方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實現(xiàn)對highlight-current-row方式整行選中后修改默認(rèn)背景顏色
這篇文章主要介紹了vue實現(xiàn)對highlight-current-row方式整行選中后修改默認(rèn)背景顏色方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue-quill-editor+plupload富文本編輯器實例詳解
這篇文章主要介紹了vue-quill-editor+plupload富文本編輯器實例詳解,需要的朋友可以參考下2018-10-10

