VUE中的全选和反选以及点击高亮

最新推荐文章于 2021-12-02 17:04:07 发布

原创最新推荐文章于 2021-12-02 17:04:07 发布 · 348 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了在Vue.js中实现全选和反选功能的方法，利用计算属性computed进行处理。当需要更新计算属性绑定的值时，会触发set方法，从而完成数据的双向绑定操作。

全选和反选

使用vue的计算属性computed实现:

当要给绑定计算属性的标签赋值时,会触发计算属性的set方法,这时候就需要使用计算属性的完整写法:

//......省略html
<input class="toggle" type="checkbox" v-model="e.isDone" />
// 小复选框要绑定数据中的布尔值,数据中没有跟后台沟通一下

<script>
export default {
// ......省略其他代码
props: [{id: 100, name: "金长剑", isDone: false},
        {id: 101, name: "金甲", isDone: false},
        {id: 102, name: "凤凰羽", isDone: false},
        {id: 103, name: "吃鸡!", isDone: false}],
  
}
</script>

<template>
  <header class="header">
    <!-- 省略html-->
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" />
  </header>
</template>

<script>
export default {

//.....省略其他代码

  computed: {
    isAll: {
      set(a) {
  //因为使用的v-model双向数据绑定,所以当接收的不是数组时,v-model收集的是input的checked属性
  //此时a接收到的是表单标签的checked属性,此刻就可遍历数据中的小复选框的checked属性
  //并且让它们全选框的checked属性同步
        this.arr.forEach((e) => {
          e.isDone = a;
        });
      },

  //get方法一定要有一个返回值,赋予绑定计算属性的标签,所以就可以在get属性中判断小复选框的状态
  // every方法就会返回一个布尔值,判断当所有的小复选框的选中状态为true时,会返回true,
  //此时isAll计算属性就会return出一个true给全选框,这样就完成了小复选框和全选框的全选绑定
      get() {
        return (
          this.arr.length !== 0 && this.arr.every((e) => e.isDone === true)
        );
      },
    },
  },
};
</script>