checkbox复选框的取值和赋值

使用场景：循环遍历了所有城市，用户选中某一些城市，生成一个list，我们需要在确定的时候获取所有选中的checkbox的value值。

实现效果图：

上代码：

html代码：

<div v-for="(v,i) in list " :key="i">
      <span>{{v.name}}</span> 
      <input type="checkbox" v-model="checkedArr" :value="v.name">
</div>

js代码：

 data() {
        return {
            dialogVisible: false,
            checkedArr:[],
            arr:[],
            list: [{
                id: 0,
                name: '重庆'
            }, {
                id: 1,
                name: '上海'
            }, {
                id: 2,
                name: '南京'
            }, {
                id: 3,
                name: '天津'
            }]
        };
    },

深度监听：

     watch:{
        'checkedArr':{
            handler(value){
                this.arr=value
                console.log(this.arr);
            },
            deep:true, //深度监听
     }
    

强调最重要的一点，v-model会在checkbox选中的时候，自动将当前的value值push进数组；在取消checkbox的时候，自动将当前的value值pop出数组。