一、计算属性的基本使用

计算属性：一个特殊属性，值依赖于另外一些数据动态计算出来。
🚩🚩🚩计算属性特点：函数内使用的变量改变，重新计算结果返回。
💣💣💣注意：
①、计算属性必须定义在computed节点中。
②、计算属性必须是一个function，计算属性必须有返回值。
③、计算属性不能被当当作方法调用，要作为属性来使用。

computed:{"计算属性名"(){return "值"}
}

<template><div><p>和为：{{ num }}</p></div>
</template>

计算属性也是属性, 所以不要和data里重名, 用起来也和data类似

（一）全选反选案例

在这里插入图片描述

<template><div><span>全选:</span><input type="checkbox" v-model="ck" /><!-- <button >反选</button> --><ul><li><input type="checkbox" /><span>名字</span></li></ul></div>
</template><script>
export default {// 初始化数据data() {return {arr: [{name: "猪八戒",c: false, // 该项是否选中？},{name: "孙悟空",c: false,},{name: "唐僧",c: false,},{name: "白龙马",c: false,},],};},
};
</script>
<style>
</style>

在这里插入图片描述

<template><div><span>全选:</span><input type="checkbox" v-model="ck" /><!-- <button >反选</button> --><ul><li v-for="(item,i) in arr" :key="i"><!-- :checked="item.c" 单项数据绑定 --><!-- v-model="item.c"  双向数据绑定 --><input type="checkbox" v-model="item.c"/><span>{{item.name}}</span></li></ul></div>
</template>

在这里插入图片描述

📢📢📢（1）小选决定大选，大选被小选算计出来

方法一 —— forEach循环

<template><div><span>全选:</span><input type="checkbox" :checked="bigCk" /><!-- <button >反选</button> --><ul><li v-for="(item, i) in arr" :key="i"><!-- :checked="item.c" 单项数据绑定 --><!-- v-model="item.c"  双向数据绑定 --><input type="checkbox" v-model="item.c" /><span>{{ item.name }}</span></li></ul></div>
</template><script>
// s四个小选----->决定大选
// 1.四个小选状态,都选中!大选框也要选中!否则,不能选中
// 2.大选框的状态,是由四个小选框的状态决定!由四个小选状态计算出来
// [大选框的状态被计算出来!]
export default {// 初始化数据data() {return {arr: [{name: "猪八戒",c: true, // 该项是否选中？},{name: "孙悟空",c: false,},{name: "唐僧",c: false,},{name: "白龙马",c: false,},],};},//计算属性:computed:{// 【简单写法】语法:// 自定义属性名:(){计算出某个值的过程   return 结果; } bigCk(){// 四个小选-->决定大选let key;//大选值let num=0;// 小选选中的个数// 统计小选选中的个数// this.arr当前的组件对象arrthis.arr.forEach(item =>{if(item.c==true){num++;// 统计}});// num 统计的结果if(num==this.arr.length){// 选中的个数 和 数组的长度一样key = true;}else{// 有的没有选中key = false;}return key;}},
};
</script>

方法二 —— every方法

①、【计算属性的简单写法】

🤔🤔🤔every()方法是数组对象的一个方法，它用于检测数组中的所有元素是否都满足某个条件，如果所有元素都满足条件，则返回true，否则返回false。

ck(){return this.arr.every(item => item.c==true)
}

在这里插入图片描述

②、【完整写法】

ck:{get(){return this.arr.every(item => item.c==true);}
}

📢📢📢（2）全选算计小选

点击“选中的”全选按钮，所有的选项都取消。

<template><div><span>全选:</span><input type="checkbox" v-model="ck" /><!-- <button >反选</button> --><ul><li v-for="(item, i) in arr" :key="i"><!-- v-model="item.c"  双向数据绑定👇👇👇👇👇 --><input type="checkbox" v-model="item.c" /><span>{{ item.name }}</span></li></ul></div>
</template>
<script>
export default {// 初始化数据data() {return {arr: [{name: "猪八戒",c: true, // 该项是否选中？},{name: "孙悟空",c: false,},{name: "唐僧",c: false,},{name: "白龙马",c: false,},],};},//计算属性:computed:{ck:{get(){return this.arr.every(item => item.c==true);},set(val){//ck要算计别人,得让视图上有得到ck值机会//把val值设置给每一个小选框!this.arr.forEach(item =>item.c=val);}}},
};
</script>

🔔🔔🔔注意：
什么时候用计算属性：
①、简单写法：发现某个值，被算计出来！！
②、完整写法：除了被算计，还要算计别人！！

（二）计算属性的设置问题—完整写法

✅✅✅计算属性默认情况下只能获取，不能修改。
✅✅✅要给计算属性赋值，就必须写计算属性的完整写法！！

computed:{full:{get(){...},set(value){...}}
}

💭💭💭什么时候用计算属性完整写法？给计算属性变量赋值时。

（三）不用计算属性，用函数调用能实现吗？计算属性优势在哪里？

📢📢📢（1）计算属性的缓存说明

🍂🍂🍂计算属性，基于依赖项的值进行缓存，依赖的变量不变，都直接从缓存取结果。
计算属性如果被多次使用，性能极高。

<template><div><ul><li v-for="(item,i) in list" :key="i"> {{ item }}</li></ul><h1>总分由方法调用:{{ zf() }}</h1><h1>总分由方法调用:{{ zf() }}</h1><h1>总分由方法调用:{{ zf() }}</h1><h1>总分由计算属性:{{ jszf }}</h1><h1>总分由计算属性:{{ jszf }}</h1><h1>总分由计算属性:{{ jszf }}</h1></div>
</template><script>
export default {data(){return{list:[88,99,100]}},methods:{// 没有使用计算属性,用常规方法调用,返回值zf(){console.log("方法调用")return this.list.reduce((sum,item) => sum+=item,0);}},computed:{jszf(){console.log("计算属性")return this.list.reduce((sum,item) => sum+=item,0);}}
}
</script>