Vue的全选功能实现思路

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

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

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

详细思路

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

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

2. 当所有选择框都被选中时,选中全选框:

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

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

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

猜你喜欢

转载自www.cnblogs.com/mengyouyouyou/p/10893390.html
今日推荐