VUE 全选

<div id="vue_det">
    <p>全选:</p>
    <input type="checkbox" id="checkbox" v-model="checked" @change="changAllChecked"/>
    <label for="checkbox">
        {{checked}}
    </label>

    <p>多个复选框</p>
    <input type="checkbox" id="r1" value="r1" v-model="checkedNames"/>
    <label for="r1">r1</label>
    <input type="checkbox" id="r2" value="r2" v-model="checkedNames"/>
    <label for="r2">r2</label>
    <input type="checkbox" id="r3" value="r3" v-model="checkedNames"/>
    <label for="r3">r3</label>
    <input type="checkbox" id="r4" value="r4" v-model="checkedNames"/>
    <label for="r4">r4</label>
    <input type="checkbox" id="r5" value="r5" v-model="checkedNames"/>
    <label for="r5">r5</label>

    <span>选择的值为：{{checkedNames}}</span>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#vue_det',
        data:{
            checked:false,
            checkedNames:[],
            checkedArr:['r1','r2','r3','r4','r5']
        },
        methods:{
            changAllChecked:function(){
                if(this.checked){
                    this.checkedNames = this.checkedArr
                }else{
                    this.checkedNames=[]
                }
            }
        }
    });
</script>