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