vue --- > v-for给input绑定值,并实现checkbox的全选

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
    
<div id="app">
    <input type="checkbox" v-model="checkedAll" id="all" @click="selectAll()">
    <label for="all">全选:</label>
    <br>
    <hr/>
    <template v-for="(item, index) in list">
        <input type="checkbox" :value="item.value" :id="item.value" v-model="checked" />
        <label :for="item.value">{{ item.label }}</label>
        <br>
    </template>
    <br>
    <p>选择了:{{ checked }}</p>
</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
    const app = new Vue({
    el: '#app',
    data: {
        checked:[],
        checkedAll:false,
        list:[
            {
                id:1,
                value:'javascript',
                label:'JavaScript'
            },{
                id:2,
                value:'html',
                label:'HTML'
            },{
                id:3,
                value:'css',
                label:'CSS'
            }]
    },
    methods:{
        selectAll:function(){
            if(this.checkedAll){
                // 全不选
                this.checked = [];
            }else{
                // 全选
                this.checked = [];
                this.list.forEach((item)=>{
                    this.checked.push(item.value);
                })
            }
        }
    },
    watch:{
        checked: function(){
            let self = this;
            if(this.checked.length === this.list.length){
                self.checkedAll = true;
            } else{
                self.checkedAll = false;
            }
        }
    }

})
</script>

</body>
</html>

说明:

复选框checkbox的选中与否是根据v-model(上例绑定checked)和value来的,例如,如果checked = ‘html’, 则value='html’的被选中.
使用v-for="item in list"将item绑定到input上面,要使用 : (冒号语法糖绑定)
watch是监听值(checked)的变化,没变化一次,执行一次

// 注:复选框还可以规定不成功的值
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
<label>复选框</label>
<script>
    const app = new Vue({
        el:'#app',
        data: {
            toggle: false,
            value1: 'a',
            value2: 'b'
        }
    })
</script>
// 勾选时:app.toggle === app.value1; 未勾选时,app.toggle === app.value2

参考《Vue.js实战》 P58~P59

vue --- > v-for给input绑定值,并实现checkbox的全选

猜你喜欢