<template>
<div>
<!-- 计算属性:作用：根据一些数据计算出来一个属性 -->
<!-- 当计算属性依赖的数据变化的时候，计算属性会重新计算 -->
<!-- 计算属性是作为变量使用的，不要使用括号语法 -->
<!-- 计算属性不能和data里的变量重名 -->
<h1>总价:{{ sum }} = {{ A }} + {{ B }}</h1>
a:<input type="text" v-model.number="A" />
</div>
</template>
<script>
export default {
data() {
return {
A: 8,
B: 10,
};
},
//计算属性声明在data同级computed对象里面
computed: {
sum() {
//计算属性声明为方法
return this.A + this.B;
},
},
};
</script>
<style>
</style>
- 计算属性的使用场景？
- 当量的值，需要通过别人计算而得来
- 计算属性特点？
- 计算属性的依赖发生改变的时候，重新计算结果返回
- 计算属性注意事项？
- 计算属性名和data里妹子不能重复
计算属性缓存
计算属性，基于依赖项的值进行缓存，依赖的变量，都直接从缓存区结果
- 计算属性好处？
- 带缓存
- 依赖项不变，直接从哪缓存取
- 依赖项改变，函数自动执行并重新缓存
- 计算属性使用场景？
- 当变量值。依赖其他变量计算而得来才用（一般用户购物车总价，和全选被选）
计算总价看 下图
<template>
<div>
<p>全选:<input type="checkbox" v-model="isAll" /></p>
<ul>
<li v-for="item in list" :key="item.id">
<input type="checkbox" v-model="item.checked" />
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: "八戒", checked: false },
{ id: 2, name: "悟空", checked: false },
{ id: 3, name: "唐僧", checked: false },
{ id: 4, name: "白龙马", checked: false },
],
};
},
//计算属性
computed: {
isAll: {
//set 设置，更新 set是设置我们的计算属性用的
set(value) {
//如果全选勾中 那么数组中的每一项都为true
// if (value === true) {
// this.list.forEach((item) => {
// item.checked = true;
// });
// //
// } else {
// this.list.forEach((item) => {
// item.checked = false;
// });
// }
//优化写法
this.list.forEach((item) => {
item.checked = value;
});
},
//get 获取 get是获取我们的计算属性的内容
get() {
let all = true;
this.list.forEach((item) => {
if (item.checked === false) {
all = false;
}
});
return all;
},
},
},
};
</script>
<style>
</style>
