【Vue】计算属性
目录
概念
作用
语法
使用方法
使用示例
计算属性的优势
**完整写法
**示例：多选框全选反选
概念
基于现有的数据，计算出来的新数据；当现有的数据变化，会自动重新计算。
作用
封装一段基于现有数据，计算求的一个新数据
语法
写在computed函数中，必须返回，作为属性直接使用。
- js中获取计算属性：计算属性.value。
- 模板中使用计算属性：{{计算属性}}。
import {computed} from 'vue'
const 新数据 = computed( ()=>{
//编写计算代码
return 结果
})
使用方法
计算属性的结果用法与ref/reactive响应式数据用法一样，既可以配合插值，也可以配合指令使用。
在js中要获取计算属性，需要通过 计算属性.value
使用示例
效果：
具体代码：
这里使用了快速计算一个数组的和reduce方法
goodList.value.reduce((acc,cur)=>{return acc+cur.price},0)
第二个参数0,是给acc初始化，随后进行累加
<h3>水果清单</h3>
<table>
<thead>
<tr>
<th>名字</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="item in goodList" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
</tr>
</tbody>
</table>
<p>总价：{{ totalPrice }}</p>
</template>
<script setup>
import {computed,ref} from 'vue'
const goodList=ref([
{id:1,name:'apple',price:10},
{id:2,name:'banana',price:20},
{id:3,name:'orange',price:30},
])
const totalPrice=computed(()=>{
if(goodList.length===0){
return 0
}
return goodList.value.reduce((acc,cur)=>{
return acc+cur.price
},0)
})
</script>
<style>
table{
width: 350px;
border:1px solid #333;
}
table th,table td{
width: 50%;
border: 1px solid #333;
}
table td{
text-align: center;
}
</style>计算属性的优势
带缓存：如果依赖的值没有发生变化，多次调用，函数体只会在第一次调用时执行；当依赖发生变化时，计算属性才会重新计算，并缓存新的结果。
**完整写法
上述的写法是简易的写法，计算属性是只读的，只能展示，不能修改值（界面视图上修改），因此当我们需要修改计算属性的时候，就需要用到完整写法：get、set
const total=computed({
//使用计算属性的时候，自动触发get，get内部必须返回计算结果
get(){
return 计算结果
},
//修改计算属性自动触发set，val参数表示要给计算属性赋予的值
set(value){
计算结果=value
}
})
这里修改计算属性时，也就是当计算属性配合v-moel的时候
**示例：多选框全选反选
- 当所有选项都被勾选时，全选框自动勾选
- 当全选框勾选时，所有选项都被勾选
- 当全选框取消勾选时，所有选项都被取消勾选
- 点击反选按钮时，所有选项反选
效果如下：
具体代码：
<template>
<p>
<span>
//v-model和计算属性的配合使用
<input type="checkbox" id="all" v-model="allChecked"/>
<label for="all">全选</label>
</span>
<button @click="plantList.forEach(item => item.completed = !item.completed)">反选</button>
</p>
<ul>
<li v-for="item in plantList" :key="item.id">
<input type="checkbox" v-model="item.completed" />
<span :class="{completedClass:item.completed}">{{ item.name }}</span>
</li>
</ul>
</template>
<script setup>
import { ref ,computed} from 'vue'
const plantList = ref([
{ id: 1, name: '跑步', completed: false },
{ id: 2, name: '打球', completed: false },
{ id: 3, name: '游泳', completed: true },
{ id: 4, name: '健身', completed: false },
])
const allChecked = computed({
get(){
//every方法返回布尔值，true表示所有元素都满足条件，false表示有元素不满足条件
return plantList.value.every(item => item.completed)
},
set(value){
plantList.value.forEach(item => item.completed = value)
}
})
</script>
<style lang="scss">
*{
margin: 0;
padding: 0;
}
#app{
width: 400px;
max-width: 100px auto;
padding:15px 18px;
background: rgb(4, 250, 218);
p{
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
border-bottom: 1px solid #ccc;
button{
padding:3px 6px;
}
input{
margin-right: 8px;
}
}
ul{
li{
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
border-bottom: 1px solid #ccc;
span.completed{
color:#ddd;
text-decoration: line-through;
}
}
}
}
ul{
list-style: none;
}
.completedClass{
color:#04c1fb;
}
</style>