Vue实现全选按钮

Tԅ(¯ㅂ¯ԅ)

已于 2023-04-01 20:29:24 修改

阅读量595

点赞数 2

文章标签： vue.js javascript 前端

于 2023-03-29 10:52:18 首次发布

本文链接：https://blog.csdn.net/2201_75321887/article/details/129831385

版权

预期效果：点击全选时，所有按钮全部选中，所有按钮全部选中时，全选按钮也自动被选择，但只要有一个按钮未被选中，则全选按钮就不会被选中。

步骤：

1.在头部引入Vue文件。

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

2.创建一个div并实例化Vue对象，Vue作用范围为div内部。

<div id="app">

</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
                    
        }
    })
</script>

3.创建按钮，并为全选按钮绑定v-model属性（双向绑定），其他按钮我们可以使用v-for循环来进行传值实现，同样为其他按钮也进行v-model绑定。（{{i.name}}是调用函数，用于接收显示每个按钮名称）。

全选<input type="checkbox" v-model="allCheck" />
			<ul>
				<li v-for="i in list">
					<input type="checkbox" v-model="i.select" />{{i.name}}
				</li>
			</ul>

4.创建数组，数组内存放其他按钮的名称以及状态（状态采用布尔值表示）。

list: [
        { name: '前端', select: false },
        { name: 'UI', select: false },
        { name: '后端', select: false }
    ]

5.在计算属性内书写全选按钮绑定的对象。用every（）（用于遍历数组中所有元素，只要有一项不符合要求，便返回false，全符合要求则返回true）实现其他按钮全部被选中时，全选按钮也被选中，用forEach（）（用于调用数组的每个元素，并将元素传递给回调函数）实现点击全选按钮其他按钮全部被选中效果。

computed: {

					allCheck: {
						get ()
						{
							return this.list.every( i => i.select )
						},
						set ( val )
						{
							this.list.forEach( element =>
							{
								element.select = val;
							} );
						}
					}
				},

运行效果：

完整代码：

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <div id="app">
            全选<input type="checkbox" v-model="allCheck" />
            <ul>
                <li v-for="i in list">
                    <input type="checkbox" v-model="i.select" />{{i.name}}
                </li>
            </ul>
        </div>
        <script>
            var vm = new Vue( {
                el: '#app',
                data: {
                    list: [
                        { name: '前端', select: false },
                        { name: 'UI', select: false },
                        { name: '后端', select: false }
                    ]
                },
                computed: {
                    allCheck: {
                        get ()
                        {
                            return this.list.every( i => i.select )
                        },
                        set ( val )
                        {
                            this.list.forEach( element =>
                            {
                                element.select = val;
                            } );
                        }
                    }
                }
            } )
        </script>
    </body>

</html>