vue实现多选框全选功能

vue实现多选框全选功能。如下，勾选时表示事情已处理完。

html部分

<div>
    <ul>
      <li v-for="(todo, index) in todoList" :key="index">
        <input type="checkbox" v-model="todo.done">
        {{todo.title}}
      </li>
    </ul>
     全选<input type="checkbox" v-model="allDone">
  </div>

可以直接用计算属性computed来实现

data() {
    return {
      todoList: [
        { title: "吃饭", done: false },
        { title: "睡觉", done: true },
      ],
    };
  },
computed: {
    allDone:{
      get: function() {
        return this.active === 0;
      },
      set: function(val) {
        return this.todoList.forEach(todo => {
            todo.done = val;
        });
      }
    }
  },

最后

以上就是单身蚂蚁为你收集整理的vue实现多选框全选功能的全部内容，希望文章能够帮你解决vue实现多选框全选功能所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。