文章目录
-
-
-
- 1.数组变化的侦测
-
- 2.计算属性
-
- 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");
<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(){
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>
