5.vue学习笔记(数组变化的侦测+计算属性+Class绑定)

1.数组变化的侦测

1.1.变更方法

vue能够侦听响应式数组的变更方法，并在它们被调用时出发相关的更新。这些变更方法包括：
push()		
pop()		
shift()		
unshift()	
splice()	
sort()		
reverse()	

1.2.替换一个数组

变更方法，就是会对调用它们的原数组进行变更。相对的，也有一些不可变的方法，例如：
filter()	concat()	slice()
这些不会更改原数组，而总是返回一个新数组，当遇到的是非变更方法时，我们需要将旧的数组替换为新的

//重新赋值后产生变换
this.names = this.names.concat("Brook");

<template><h3>数组变化侦听</h3><button @click="addListHandle">添加数据</button><ul><li v-for="(name,index) of names" :key="index">{{ name }}</li></ul><button @click="concatHandle">合并数组</button><h3>数组1</h3><p v-for="(num,index) of num1" :key="index">{{ num }}</p><h3>数组2</h3><p v-for="(num,index) of num2" :key="index">{{ num }}</p></template><script>export 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);}}
}
</script>

2.计算属性

模板中的表达式虽然方便，但也只能用来做简单的操作，如果在模板中写太多的逻辑，会让模板变得臃肿，难以维护。
因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑

<template><h3>{{ person.name }}</h3><p>{{ person.content.length > 0 ? "yes" : "no" }}</p>
</template><script>export default {data(){return {person:{name: "张三",content: ["软件工程","Java","互联网与应用技术"]}}}
}
</script>改造后<template><h3>{{ person.name }}</h3><p>{{ personContent }}</p><p>{{ personContent1() }}</p>
</template><script>export 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用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组

<template><h3>Class样式</h3><p :class="myClass">Class样式绑定</p>
</template><script>export default {data(){return{myClass: "Demo"}}
}    
</script>

3.1.绑定对象

<template><h3>Class样式</h3><p :class="{ 'active':isActive,'text-danger':hasError }">Class样式绑定</p>
</template><script>export default {data(){return{isActive: true,hasError: true}}
}    
</script><style>
.active{font-size: 30px;
}
.text-danger{color:red;
}</style>

3.2.多个对象的绑定形式

<template><h3>Class样式</h3><p :class="ClassObject">Class样式绑定</p>
</template><script>export default {data(){return{ClassObject:{active: true,'text-danger': true}}}
}    
</script><style>
.active{font-size: 30px;
}
.text-danger{color:red;
}</style>

3.3.绑定数组

<template><h3>Class样式</h3><p :class="[arrActive,arrTextDanger]">Class样式绑定3</p>
</template><script>export default {data(){return{arrActive: 'active',arrTextDanger: 'text-danger'}}
}    
</script><style>
.active{font-size: 30px;
}
.text-danger{color:red;
}</style>

如果想在数组中有条件地渲染某个class，也可以使用三元运算符

<template><h3>Class样式</h3><p :class="[isActive ? 'active' : '']">Class样式绑定4</p>
</template><script>export default {data(){return{isActive: true}}
}    
</script><style>
.active{font-size: 30px;
}
.text-danger{color:red;
}</style>

3.4.数组与对象

数组和对象嵌套过程中，只能是数组嵌套对象。[{},{}]

<template><h3>Class样式</h3><p :class="[{'active':isActive},arrTextDanger]">Class样式绑定5</p><p :class="[isActive ? 'active' : '',{'text-danger':hasError}]">Class样式绑定6</p>
</template><script>export default {data(){return{isActive: true,hasError: true,arrActive: 'active',arrTextDanger: 'text-danger'}}
}    
</script><style>
.active{font-size: 30px;
}
.text-danger{color:red;
}</style>