Vue的全选功能实现思路
全选功能的实现主要分两步:
1. 点击全选框选中所有选择框。
2. 当所有选择框都被选中时,勾选全选框。
详细思路:
1. 点击全选框选中所有选择框:
给全选框绑定一个值,然后添加change时间,当全选框的值改变时给所有选择框的值赋与全选框的值。
2. 当所有选择框都被选中时,选中全选框:
给所有选择框都添加change事件,当某个选择框的值改变时,检查所有选择框的状态:只要有一个选择框没被选中,则把全选框的值设为false,否则设为true。
注意:两步的关键区别在于,一个是通过事件改变,一个是通过值改变,这样可以避免陷入死循环。若是都通过监听事件改变或监听值改变,会陷入死循环。
基础知识:选择框的值是input标签的checked属性,当type为radio或checkbox时有效。