vue怎么实现全选获取value，vue的v-bind和v-model同时存在v-bind无效

Question

html代码如下

        <input type="checkbox" v-model="checkAll">全选<br>
        <input type="checkbox" :value="v1" v-model="t" :checked="checkAll"><br>
        <input type="checkbox" :value="v2" v-model="t" :checked="checkAll"><br>
        <input type="checkbox" :value="v3" v-model="t" :checked="checkAll"><br>
        <div id="down">
          {{checkAll}}
          {{t}}
        </div>

js代码如下

new Vue({
      el:"#test",
      data:{
        checkAll:false,
        t:[],
        v1:"--1--",
        v2:"--2--",
        v3:"--3--",
      },
      methods:{

      }
    });

点击全选但是没有任何效果，
如果单个点击复选框的话，就可以成功的显示
需求是点击全选，会给数组t里面加三个复选框的value值

Answer 1

来看，用watch监听可以实现，全选与非全选切换，如果数据多的话，其实可以直接把复选框的value直接放到一个数组里面，做全选的时候直接把数组项赋值给数组t比较方便

<div id="box">
        <div>
            实打实大苏打
        </div>
        全选<input type="checkbox" v-model="checkAll"/><br>
        v1<input type="checkbox" :value="v1" v-model="t"><br>
        v2<input type="checkbox" :value="v2" v-model="t"><br>
        v3<input type="checkbox" :value="v3" v-model="t"><br>
        <div id="down">
          {{checkAll}}
          {{t}}
          {{v1}}
          {{v2}}
          {{v3}}
        </div>
    </div>

<script type="text/javascript">
    var myvue = new Vue({
        el:'#box',
        data:{
            checkAll:false,
            t:[],
            v1:"--1--",
            v2:"--2--",
            v3:"--3--",
        },
        created() {
            console.log('成功了')
        },
        watch:{
            checkAll(newvalue, oldvalue){
                if(newvalue){
                    this.t = [this.v1, this.v2, this.v3];
                }
            },
            t: {
                handler(newvalue, oldvalue) {
                    if(newvalue.length < 3){
                        this.checkAll = false;
                    }
                },
                deep: true
            }
        },
    })
</script>