什么是计算属性？
当一个数据，依赖另外的一些数据计算而来的结果。
-
关键字：computed
-
语法：
computed: {
"计算属性名" () {
return "值"
}
}
- 例如计算两个数的和：
<template>
<div>
<p>{{sum}}</p>
<button @click="a++">+</button>
</div>
</template>
<script>
export default {
data () {
return {
a:1,
b:2
}
},
computed: {
sum(){
return this.a+this.b
}
}
}
</script>
<style>
</style>
注意点：计算属性也是vue数据变量, 所以不能和data里重名, 用法和data相同
计算属性的好处是什么？
-
计算属性带有缓存的作用。
-
计算属性对应函数执行后, 会把return值缓存起来
-
计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果
-
比普通方法的性能更高一些
计算属性的完整写法
什么时候使用完整写法？
-
当要给计算属性变量赋值的时候
-
语法：
computed:{
计算属性变量:{
set(值){
console.log(inputVal);
},
get(){
console.log('触发get方法');
return 值
}
}
}
什么时候触发set函数和get函数
-
set接受要赋予的值
-
get里要返回给这个计算属性具体值
-
全选反选的案例
<template>
<div>
<!-- 全选案例 -->
<span>全选:</span>
<input type="checkbox" v-model="isAll">
<ul>
<li v-for="item in list" :key="item.id">
<input type="checkbox" v-model="item.status">{{item.name}}
</li>
</ul>
</div>
</template>
<script>
export default {
// 数据
data(){
return {
list :[
{id:1,
name:'猴子',
status:false
},
{id:2,
name:'混子',
status:false
},
{id:3,
name:'狼狗',
status:false
},
{id:4,
name:'大宝剑',
status:false
},
]
}
},
// 计算属性
computed: {
isAll:{
set(status){
// 获取全选按钮的状态
// 把全选按钮的状态赋给每一个li标签
this.list.forEach(item=>{
item.status=status
})
},
get(){
return this.list.every(item=>item.status)
}
}
}
}
</script>
<style>
</style>
