vue全选和单选

瑶骨

已于 2023-01-19 14:55:54 修改

阅读量396

点赞数 1

文章标签： vue.js 前端 Powered by 金山文档

于 2023-01-10 19:02:45 首次发布

本文链接：https://blog.csdn.net/qq_47243637/article/details/128634882

版权

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        ul {
            list-style: none;
        }
    </style>
</head>

<body>
    <div id='myApp'>
        <input type="checkbox" @click="checkAll" v-model="flag">全选
        <ul>
            <li v-for="(item,index) in arr" :key="item.id">
                <input type="checkbox" v-model="select" :value="item.id">{{item.name}}
            </li>
        </ul>
    </div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
<script>
    new Vue({
        el: '#myApp',
        data: {
            flag: false, // 开关
            select: [], // 用来存储数据的id
            arr: [
                { id: 1, name: 'kiki' },
                { id: 2, name: '段艺璇' },
                { id: 3, name: '沈梦瑶' },
                { id: 4, name: '戴萌' }
            ]
        },
        methods: {
            checkAll(){
                if (this.flag) { // flag是false进入条件
                    this.select = [] // 为空说明没有被选中
                }else{
                    this.arr.forEach(element => { //遍历arr
                        this.select.push(element.id) // 给select添加id，有了id值说明都被选中
                    });
                }
            }
        },
        watch: {
            select() { // 监听select
                if (this.select.length == this.arr.length) { //select的长度 == arr的长度，说明4个都被选中
                    this.flag = true //那么全选就为选中
                } else {
                    this.flag = false // 否则全选就为没选中
                }
            }
        }
    })
</script>

</html>