wordpress站群主题,地方农产品网站建设,三层架构做网站还是系统,河池网站建设公司首先分开讲解各个属性的作用。 1.计算属性 作用#xff1a;用来计算出来一个值#xff0c;这个值调用的时候不需要加括号#xff0c;会根据依赖进行缓存#xff0c;依赖不变#xff0c;computed的值不会重新计算。 const vm new Vue({el:#root,data:{lastName:张,firstNa…首先分开讲解各个属性的作用。 1.计算属性 作用用来计算出来一个值这个值调用的时候不需要加括号会根据依赖进行缓存依赖不变computed的值不会重新计算。 const vm new Vue({el:#root,data:{lastName:张,firstName:三,},computed:{fullName:{//get作用读取fullName时get调用且返回值是fullName的值get(){return this.lastName.slice(0,3)-this.firstName.slice(0,3);},//当fullName被修改时会调用setset(value){const arr value.split(-);this.lastName arr[0];this.firstName arr[1];}}}})其中computed的属性就是计算属性其中get读取方法尽在初次读取的时候调用以及所依赖的数据发生变化的时候调用。set设置方法是当数据发生变化时就会直接调用去重新计算属性值。 2.监听属性 作用和js中的事件监听类似当vue中的属性值发生变化时执行。
const vm new Vue({el:#root,data:{ishot:true,numbers:{a:1,b:1}},methods:{change(){//this.ishot (this.ishottrue)?false:truethis.ishot !this.ishot},},computed:{info(){return this.ishot?炎热:凉爽}},watch:{ishot:{immediate:true, //初始化时让handler调用一下//handler什么时候调用当isHot发生改变时。handler(newValue,oldValue){console.log(ishot被改变了,newValue,-,oldValue)}},//监视多级结构中某个属性的变化numbers.a:{immediate:true, //初始化时让handler调用一下//handler什么时候调用当isHot发生改变时。handler(newValue,oldValue){console.log(a被改变了,newValue,-,oldValue)}},//监视多级结构中所有属性的变化numbers:{deep:true, //开启深度监视handler(){console.log(numbers改变了);}}}})上述代码中watch属性就是计算属性它包含两个属性值其中immediate属性记录的是在初始化 的时候是否需要计算一次监视属性还有一个deep属性值代表的是当所要监视的属性值是对象是是否要进行深度监视即当对象内部属性值发生变化时是否调用监视函数。 案例列表过滤 问题描述搜索框对列表中的数据进行模糊筛选。 在这个问题里面列表会根据input框中的内容对列表中的名字内容进行筛选。 因为要显示的内容跟data中的列表不一样所以一定是需要重新建一个参数的因此就需要初始化。例如监听属性中immediate属性。
htmldiv idrooth2人员列表/h2input typetext placeholder请输入名字 v-modelkeyWordul!-- 动态绑定id标识 --li v-for(person,index) in filteredPersons :keyperson.id{{person.name}}-{{person.age}}-{{person.sex}}/li/ul/div监视属性写法jsnew Vue({el:#root,data:{keyWord:,persons:[{id:001,name:马冬梅,age:19,sex:女},{id:002,name:周冬雨,age:20,sex:女},{id:003,name:周杰伦,age:21,sex:男},{id:004,name:温兆伦,age:22,sex:男}],filteredPersons:[]},watch:{//这里接收输出的值可以有两个分别是新值和旧值也可以只有一个新值keyWord:{immediate:true,handler(newValue){this.filteredPersons this.persons.filter((p){return p.name.indexOf(newValue)0;})}}}})计算属性写法jsnew Vue({el:#root,data:{keyWord:,persons:[{id:001,name:马冬梅,age:19,sex:女},{id:002,name:周冬雨,age:20,sex:女},{id:003,name:周杰伦,age:21,sex:男},{id:004,name:温兆伦,age:22,sex:男}]}, computed:{filteredPersons:{get(){var filteredPersons [];for(var i in this.persons){if(this.persons[i].name.indexOf(this.keyWord)0){filteredPersons.push(this.persons[i]);}} return filteredPersons; },set(value){this.keyWord value;}}}})
