当前位置: 首页 > article >正文

使用computed计算属性实现购物车勾选

原理

在 Vue 3 中,computed 属性默认是只读的,但你可以通过提供 set 方法来使它可写。这样,当计算属性的值被修改时,可以触发相应的逻辑来更新相关的数据。

效果示意

在这里插入图片描述

说明

  1. get 方法:用于获取计算属性的值。
  2. 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" />
        &nbsp;
        <span>{{ item.sum }}</span>
      </li>
    </ul>
    <el-checkbox v-model="isAllChecked" label="全选" size="large" />
      &nbsp;
      <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>

http://www.kler.cn/a/590170.html

相关文章:

  • Go vs Rust vs C++ vs Python vs Java:谁主后端沉浮
  • 【面试手撕】非常规算法,多线程常见手撕题目
  • Windows11 新机开荒(二)电脑优化设置
  • 企业向媒体发出邀约,有哪些注意点?
  • redis终章
  • 雷电模拟器连接Android Studio步骤
  • AI入门7:python三种API方式调用本地Ollama+DeepSeek
  • JDBC相关
  • EagleTrader为何重申重要数据前后2分钟禁止交易?
  • 【CXX】6.10 *mut T,*const T原始指针
  • 搭建刷题专业版小程序系统
  • c++ 中的可变参数模板与折叠表达式
  • 从0到1,带你开启TypeScript的奇妙之旅
  • 《图解设计模式》 学习笔记
  • 自动注入@resource和@autowired的区别
  • Bridge Constructor Medieval for Mac 桥梁构造师:中世纪解谜建桥游戏 支持M、Intel芯片
  • uniapp+Vue3 开发小程序功能(下载文件)
  • 爬楼梯(js实现,LeetCode:70)
  • 每天五分钟深度学习PyTorch:循环神经网络RNN的计算以及维度信息
  • css的显示模式