使用 Vue 做全选操作

最新推荐文章于 2026-05-18 05:40:25 发布

原创最新推荐文章于 2026-05-18 05:40:25 发布 · 943 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

该代码片段展示了如何在Vue.js应用中使用v-model和计算属性来实现全选/全不选的功能。通过v-for循环遍历数组生成多个复选框，并绑定每个复选框的checked状态。计算属性用于同步全选按钮的状态与所有复选框的状态。

<div id="app">
    全选：<input type="checkbox" v-model="chooseAll" /> <br />
<div>
    // 利用v-for循环渲染多选框，绑定v-model
    <input v-for="item in arr" type="checkbox" v-model="item.checked" />
</div>
</div>
<script>
    new Vue({
        data:{
            arr:[{checked:false},{checked:false}]
        },
        // 我们要用到计算属性的高级用法
        computed:{
            chooseAll:{ // 全选的名称
                get(){ // 获取值
                    // 数组方法 every：当数组中的每一个元素都返回true的时候，就会返回true；只要有一个元素不是true，就会返回false
                    return this.arr.every(item=>item.checked)
                },
                set(newValue){ // 设置值
                    // newValue 就是早v-mode中绑定chooseAll名，input的状态
                    // 对这个数组进行渲染，让这个数组每一个元素的checked属性和全选按钮的状态保持一致
                    this.arr.forEach(item=>item.checked = newValue)
                }
            }
        }
    })
</script>