深圳市南山区住房和建设局网站官网小程序定制开发
原理
在 Vue 3 中，computed 属性默认是只读的，但你可以通过提供 set 方法来使它可写。这样，当计算属性的值被修改时，可以触发相应的逻辑来更新相关的数据。
效果示意
说明
- get 方法：用于获取计算属性的值。
- set 方法：用于设置计算属性的值。当计算属性的值被修改时，
set方法会被触发。
<template><div style="padding-left: 40px;"><ul><li v-for="(item, index) in goodsList" :key="index"><el-checkbox v-model="item.isChecked" :label="item.name" size="large" /> <span>{{ item.sum }}</span></li></ul><el-checkbox v-model="isAllChecked" label="全选" size="large" /> <span>{{ total }}</span></div>
</template><script setup lang="ts">
import { computed, reactive } from 'vue';const goodsList = reactive([{ name: 'xxx', isChecked: false, sum: 24 },{ name: 'jjj', isChecked: false, sum: 56 },{ name: 'vvv', isChecked: false, sum: 12 },
]);const isAllChecked = computed({get() {return goodsList.every(item => item.isChecked)},set(val) {goodsList.forEach(item => item.isChecked = val)}
});const total = computed(() => {return goodsList.reduce((sum, item) => sum + (item.isChecked ? item.sum : 0), 0);
});
</script>