软膜做网站有用吗,定制网站系统开发,app开发公司资质,企网官方网站文章目录 1.数组变化的侦测1.1.变更方法1.2.替换一个数组 2.计算属性计算属性缓存vs方法 3.Class绑定3.1.绑定对象3.2.多个对象的绑定形式3.3.绑定数组3.4.数组与对象 1.数组变化的侦测
1.1.变更方法
vue能够侦听响应式数组的变更方法#xff0c;并在它们被调用时出发相关的… 文章目录 1.数组变化的侦测1.1.变更方法1.2.替换一个数组 2.计算属性计算属性缓存vs方法 3.Class绑定3.1.绑定对象3.2.多个对象的绑定形式3.3.绑定数组3.4.数组与对象 1.数组变化的侦测
1.1.变更方法
vue能够侦听响应式数组的变更方法并在它们被调用时出发相关的更新。这些变更方法包括
push()
pop()
shift()
unshift()
splice()
sort()
reverse() 1.2.替换一个数组
变更方法就是会对调用它们的原数组进行变更。相对的也有一些不可变的方法例如
filter() concat() slice()
这些不会更改原数组而总是返回一个新数组当遇到的是非变更方法时我们需要将旧的数组替换为新的//重新赋值后产生变换
this.names this.names.concat(Brook);templateh3数组变化侦听/h3button clickaddListHandle添加数据/buttonulli v-for(name,index) of names :keyindex{{ name }}/li/ulbutton clickconcatHandle合并数组/buttonh3数组1/h3p v-for(num,index) of num1 :keyindex{{ num }}/ph3数组2/h3p v-for(num,index) of num2 :keyindex{{ num }}/p/templatescriptexport default {data(){return{names: [Tom,Bob,Lisa],num1: [1,2,3,4,5],num2: [6,7,8,9,10]}},methods:{addListHandle(){//引起UI自动更新//this.names.push(Brook);//不会引起UI自动更新// this.names.concat(Brook);// console.log(this.names.concat(Brook));//重新赋值后产生变换this.names this.names.concat(Brook);},concatHandle(){this.num1 this.num1.concat(this.num2);}}
}
/script2.计算属性
模板中的表达式虽然方便但也只能用来做简单的操作如果在模板中写太多的逻辑会让模板变得臃肿难以维护。
因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑templateh3{{ person.name }}/h3p{{ person.content.length 0 ? yes : no }}/p
/templatescriptexport default {data(){return {person:{name: 张三,content: [软件工程,Java,互联网与应用技术]}}}
}
/script改造后templateh3{{ person.name }}/h3p{{ personContent }}/pp{{ personContent1() }}/p
/templatescriptexport default {data(){return {person:{name: 张三,content: [软件工程,Java,互联网与应用技术]}}},//计算属性computed:{personContent(){return this.person.content.length 0 ? yes : no}},//放函数或者方法methods:{personContent1(){return this.person.content.length 0 ? yes : no} }
}
/script计算属性缓存vs方法
以上代码可以看出计算属性和方法都能实现那么为什么要使用计算属性
计算属性计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才会重新计算
只要代码不变只执行一次多次调用的值也只执行一次
方法方法调用总是会在重渲染发生时再次执行函数
方法调用几次执行几次3.Class绑定
数据绑定的一个常见需求场景是操纵元素的 CSS class列表因为class是attribute我们可以和其他attribute一样使用v-bind将它们和动态字符串绑定。
但是在处理比较复杂的绑定时通过拼接生成字符串是麻烦且容易出错的。
因此Vue专门为class的v-bind用法提供了特殊的功能增强。除了字符串外表达式的值也可以是对象或数组templateh3Class样式/h3p :classmyClassClass样式绑定/p
/templatescriptexport default {data(){return{myClass: Demo}}
}
/script3.1.绑定对象
templateh3Class样式/h3p :class{ active:isActive,text-danger:hasError }Class样式绑定/p
/templatescriptexport default {data(){return{isActive: true,hasError: true}}
}
/scriptstyle
.active{font-size: 30px;
}
.text-danger{color:red;
}/style3.2.多个对象的绑定形式
templateh3Class样式/h3p :classClassObjectClass样式绑定/p
/templatescriptexport default {data(){return{ClassObject:{active: true,text-danger: true}}}
}
/scriptstyle
.active{font-size: 30px;
}
.text-danger{color:red;
}/style3.3.绑定数组
templateh3Class样式/h3p :class[arrActive,arrTextDanger]Class样式绑定3/p
/templatescriptexport default {data(){return{arrActive: active,arrTextDanger: text-danger}}
}
/scriptstyle
.active{font-size: 30px;
}
.text-danger{color:red;
}/style如果想在数组中有条件地渲染某个class也可以使用三元运算符templateh3Class样式/h3p :class[isActive ? active : ]Class样式绑定4/p
/templatescriptexport default {data(){return{isActive: true}}
}
/scriptstyle
.active{font-size: 30px;
}
.text-danger{color:red;
}/style3.4.数组与对象
数组和对象嵌套过程中只能是数组嵌套对象。[{},{}]templateh3Class样式/h3p :class[{active:isActive},arrTextDanger]Class样式绑定5/pp :class[isActive ? active : ,{text-danger:hasError}]Class样式绑定6/p
/templatescriptexport default {data(){return{isActive: true,hasError: true,arrActive: active,arrTextDanger: text-danger}}
}
/scriptstyle
.active{font-size: 30px;
}
.text-danger{color:red;
}/style
