实例，用computed 计算属性，来进行全选和反选

看图 要求，点击全选按钮实现内容全选，，再次点击全不选。点击内容全部选中时，全选按钮也选中，否则就不选中

代码如下

<div id="app">
  <input type="checkbox" v-model="allChecked" />全选
  <ul>
    <li v-for="item in list">
      <input v-model="item.checked" type="checkbox" />{{item.name}}
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      list: [
        {
          id: 1,
          name: "碧瑶",
          checked: false,
        },
        {
          id: 2,
          name: "小凡",
          checked: true, //默认选中一个
        },
        {
          id: 3,
          name: "陆雪琪",
          checked: false,
        },
        {
          id: 4,
          name: "野狗道人",
          checked: false, 
        },
      ],
    },
    methods: {},
    computed: { // 计算属性
      allChecked: {
        // 设置值
        set(val) {
          // console.log(val); true /false 
          this.list.forEach((item) => (item.checked = val));
        },
        // 取值
        get() {
          return (
            this.list.filter((item) => item.checked).length ==
            this.list.length
          );
        },
      },
    },
  });
</script>
就实现了