Vue入门四、单个监听watch、深度监听deep、多个监听computed
watch单个监听
computed多个监听
当watch监听复杂数据类型的时候需要做深度监听deep
watch深度监听deep表达式:
// 深度监听 watch:{ msg:{ handler(val, oldval){ if(val.text == 'love'){ alert('I Love You') } }, deep:true//开启深度监听 } }
watch深度监听
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><div id="app"> <div>watch监听器</div> <input type="text" v-model="msg.text"></div><script type="text/javascript"> new Vue({ el:'#app', data(){ return { msg:{text:''}, } }, // 深度监听 watch:{ msg:{ handler(val, oldval){ if(val.text == 'love'){ alert('I Love You') } }, deep:true//开启深度监听 } } })</script></body></html>
watch监听
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><div id="app"> <div>watch监听器</div> <input type="text" v-model="msg"></div><script type="text/javascript"> new Vue({ el: '#app', data() { return { msg: '' } }, // 深度监听 watch: { msg: { handler(val, oldval) { if (val == 'love') { alert('I Love You') } } } } })</script></body></html>
computed多监听
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><div id="app"> <div>computed监听</div> <br> (<input type="text" v-model="n1">+ <input type="text" v-model="n2">)* <input type="text" v-model="n3">={{result}}</div><script type="text/javascript"> new Vue({ el:'#app', data(){ return { n1:'', n2:'', n3:'' } }, // computed监听多个 computed:{ result(){ return (Number(this.n1)+Number(this.n2))*Number(this.n3) } } })</script></body></html>
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。