Vue的全选功能实现思路

Posted 2021-12-01 mengyouyouyou

全选功能的实现主要分两步：

1. 点击全选框选中所有选择框。

2. 当所有选择框都被选中时，勾选全选框。

详细思路：

1. 点击全选框选中所有选择框：

　　给全选框绑定一个值，然后添加change时间，当全选框的值改变时给所有选择框的值赋与全选框的值。

2. 当所有选择框都被选中时，选中全选框：

　　给所有选择框都添加change事件，当某个选择框的值改变时，检查所有选择框的状态：只要有一个选择框没被选中，则把全选框的值设为false，否则设为true。

注意：两步的关键区别在于，一个是通过事件改变，一个是通过值改变，这样可以避免陷入死循环。若是都通过监听事件改变或监听值改变，会陷入死循环。

基础知识：选择框的值是input标签的checked属性，当type为radio或checkbox时有效。