Vue多选框代码示例:

<div style="display: inline-block">
    <span>自定义月份:</span>
    <span v-for="(item,index) in months">
        <input type="checkbox" :checked="customMonths.indexOf(item)>=0" @click="customMonthChecked(item)" name="custom_months" :value="item">&nbsp;<span>{{item}}</span>&nbsp;
    </span>
</div>

数据部分

data:{
    months:["01","02","03","04","05","06","07","08","09","10","11","12"],
    customMonths:[],
},

方法部分

methods:{

    customMonthChecked(mon){
            let index = this.customMonths.indexOf(mon)
            if(index>=0){
                // 如果已经包含了该元素, 则去除
                this.customMonths.splice(index,1)
            }else{
                this.customMonths.push(mon)
            }
    },
}

本示例中的数据部分是数组元数据,当然也可以是Model,使用的时候可以根据情况适当修改

暂无评论

相关推荐

Vue中的select默认选中绑定条件

场景,我们要选择一个区域,0%到100%的一个区域,我们用了两个select来选择起始位和终止位,定义了一组数,0-10,直接 …

vue中的管道处理

我们经常用到管道,如linux命令下面,find和grep的管道处理等,在tp框架的模板里我们也使用到了管道来二次加工数据,在 …

微信扫一扫,分享到朋友圈

Vue多选框代码示例: