VUE 全选

最新推荐文章于 2023-03-17 11:05:47 发布

转载最新推荐文章于 2023-03-17 11:05:47 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/supershare/p/9772240.html

文章标签：

#javascript #ViewUI

本文介绍如何在Vue.js中实现全选与多选功能，通过使用v-model和@change事件来同步更新选中状态。示例代码展示了如何在页面上创建全选复选框以及多个独立的复选框，并保持其选中状态的一致性。

<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>