基于vue实现列表全选和反选

曹壹壹

已于 2025-04-28 16:37:17 修改

阅读量271

点赞数 8

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2025-04-28 16:10:13 首次发布

本文链接：https://blog.csdn.net/qq_42967116/article/details/147589502

核心：computed计算属性

基于现有数据计算出来的新属性。依赖数据变化，自动重新计算

语法：声明在computed配置项中。一个计算属性对应一个函数

作用：封装了一段对于数据的处理，求得一个结果

缓存特性：会对计算出来的结果进行缓存，再次使用直接读取缓存

依赖项变化会自动计算并再次缓存

默认写法：

  computed:{
    计算属性名(){
         逻辑实现
      return 结果
    }
  }

完整写法：

computed: {
 计算属性名:{
    get(){
      计算逻辑
       return 结果
    },
    set(value){
      修改逻辑
    }
          
  }
},

注意：默认写法只能读取不能修改，修改需要写完整写法

第一步：在<body>中编辑好好复选框内容，用v-model实现数据双向绑定

循环遍历列表的复选框

  <div class="td"><input type="checkbox" v-model="item.isChecked"/></div>

页面底部全选复选框

 <label class="check-all">
    <input type="checkbox" v-model="isAll" />
      全选
 </label>

第二部：在data中声明列表项,注意按照项目需求获取列表数据


 data: {
  //列表
    list: []
 },

第三步：computed计算属性实现

  computed:{
  //完整写法get+set
    isAll:{
       get(){
       //必须所有的小选框都选中，全选按钮才选中 -> every
       //every方法用于检测数组里的所有元素是否都满足指定条件，若都满足则返回true，反之返回false。
         return this.list.every(item=>item.isChecked)
       },
       set(value){
        //基于拿到的bool值，让所有小选框同步状态
         this.list.forEach(item=>item.isChecked = value)
       }
    }
 }