【Vue3】 computed 完整写法全选反选、计算商品总价

原创已于 2023-11-17 08:07:43 修改

· 476 阅读

0 ·

版权

文章标签：

#javascript #开发语言 #ecmascript

于 2023-11-17 08:01:25 首次发布

文章介绍了如何在Vue中使用computed属性来实现商品选择状态的同步更新以及计算总价格，展示了get和set方法的应用以及数组操作如filter和reduce的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全选反选

  const allCheck = computed({
            get() {
                return buyCard.value.every(item => item.checkState)
            },
            set(val) {
                return buyCard.value.forEach(item => item.checkState = val);
            },
        });

计算商品总价格

const aggregatePrice = computed(() => {
  const arr = buyCard.value.filter(item => item.checkState)
  return arr.reduce((sum, item) => sum + item.price * item.inputValue, 0)
})