Vue watch、computed 数据监听
程序员文章站
2022-07-09 18:38:10
数据监听用于监听内存变量值的变化,当值变化时做一些处理。 比如将搜索框绑定一个双向绑定一个变量,搜索框的内容改变时,提供对应的预选项; 比如选择地区,省份双向绑定一个板顶当选择的省份变化时,列出的该省下辖的地区也要对应发生改变。 watch是监听单个单个变量值的变化,computed是同时监听多个变 ......
数据监听用于监听内存变量值的变化,当值变化时做一些处理。
比如将搜索框绑定一个双向绑定一个变量,搜索框的内容改变时,提供对应的预选项;
比如选择地区,省份双向绑定一个板顶当选择的省份变化时,列出的该省下辖的地区也要对应发生改变。
watch是监听单个单个变量值的变化,computed是同时监听多个变量值的变化。
watch 监听单个变量值的变化
<div id="app"> <input type="text" name="" v-model="content" /><br /> <!--双向绑定一个变量--> </div> <script> new vue({ el:'#app', data(){ return { content:'' //需要给变量赋初值 } }, watch:{ //注意写法,watch后面直接冒号,{}表示一个对象 // 定义一个变量监听,watch中也只能顶一个 content(newval,oldval){ //要监听的变量(新值,旧值){ },参数名任意,但依次是新值、旧值,顺序是固定的 console.log(newval,oldval); if(newval=='love'){ alert("the content is love"); } } } }); </script>
watch的深度监听
如果监听的是对象、数组这种复杂类型的变量,需要使用深度监听才有效。
深度监听会一级一级往下监听到对象的属性、数组元素。
<div id="app"> 姓名:<input type="text" name="" v-model="user.name" /><br /> <!--双向绑定到一个user对象的name属性--> 年龄:<input type="text" name="" v-model="user.age" /><br /> </div> <script> new vue({ el:'#app', data(){ return { user:{ //返回一个user对象 name:'', //赋初值 age:'' //输入框,都是作为字符串处理 } }; }, watch:{ user:{ //要监听的复杂类型的变量 handler(newval){ //函数名是固定的,只能是handler console.log(newval); //深度监听只记录新值、不记录旧值。如果硬要写上oldvalue,oldvalue的值和newvalue的值一样,都是新值 if(newval.name=='chy' && newval.age==20){ alert("the name is chy and the age is 20"); } }, deep:true //开启深度监听 } }, }); </script>
我绑定的是user对象的name属性,能不能直接监听name字段,这样就不使用深度监听了?
不行,监听的要是变量,对象本身是一个变量,对象的属性并不是一个变量。
computed 同时监听多个变量值的变化
<div id="app"> 加数:<input type="text" name="" v-model="n1" /><br /> 另一个加数:<input type="text" name="" v-model="n2" /><br /> 和:<span>{{sum}}</span> <!--只能用{{}},不能用v-model来绑定。v-model只能是变量,{{}}中可以是变量、函数--> </div> <script> new vue({ el:'#app', data(){ return { n1:'', n2:'' //不能初始化sum }; }, computed:{ //watch只能监听一个变量的变化,computed可以同时监听多个,比如此处就监听了n1、n2,只要其中一个变化就会调用函数 sum(){ //作为函数名 return number(this.n1)+number(this.n2); //引用v-model绑定的变量时,要用this来引用。number(string)可以将字符串转换为数值 } } }); </script>
上一篇: 听说用 Lombok 可以早点下班?
下一篇: java 停止线程