微信做一元云购网站,电脑培训班一般多少钱,网站浮动qq,网站建设公司郑州作用#xff1a;监视数据变化#xff0c;执行一些业务逻辑或异步操作。
语法#xff1a;
1.简单写法-简单类型数据#xff0c;直接监视 const app new Vue({el: #app,data: {words:},watch:{words(newValue,oldValue){}}}) const app new Vue({el: #app,data: {obj…作用监视数据变化执行一些业务逻辑或异步操作。
语法
1.简单写法-简单类型数据直接监视 const app new Vue({el: #app,data: {words:},watch:{words(newValue,oldValue){}}}) const app new Vue({el: #app,data: {obj: {words: }},watch: {obj.words(newValue) {}}})
案例翻译软件
!doctype html
htmlheadmeta charsetutf-8
/headbodydiv idapptextarea rows10 cols40 v-modelobj.words/textareatextarea rows10 cols40 v-modelresult/textarea/divscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {obj: {words: },result: ,timer: null},watch: {obj.words(newValue) {clearTimeout(this.timer)//防抖this.timer setTimeout(async () {const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: {words: newValue}})this.result res.data.data}, 300)}}})/script
/body/html
2.完整写法-添加额外配置项
1deep:true对复杂类型深度监视
2immediate:true初始化立刻执行一次handler方法 const app new Vue({el: #app,data: {obj: {words: ,lang:}},watch: {数据属性名:{deep:true,//深度监视immediate: true,//立即执行一进入页面handler就立刻执行handler(newValue){}}}})
案例翻译软件Pro
!doctype html
htmlheadmeta charsetutf-8
/headbodydiv idapp翻译成语言select v-modelobj.langoption valueenglish英语/optionoption valuefranch法语/optionoption valueitaly意大利/option/selectbrbrtextarea rows10 cols40 v-modelobj.words/textareatextarea rows10 cols40 v-modelresult/textarea/divscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {obj: {words: ,lang: english},result: ,timer: null},watch: {obj: {deep: true,immediate: true,handler(newValue) {clearTimeout(this.timer)//防抖this.timer setTimeout(async () {const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: newValue})this.result res.data.data}, 300)}}}})/script
/body/html
