Vue 事件小例子4 - (表单筛选，全选) 音乐菜单

音乐菜单要求

1.子菜单 单选，状态
2.歌手选中数量汇总
3.全选，取消全选

代码：

    
    
    
    



    

        

            
                全选
             
         
        

            

                 
                {{item.songer}} 
                {{item.music}}
            
        
        
选中歌手 {{songersNum}} 人
    
    

页面效果

音乐菜单

实现效果

1.通过数组的filter方法，利用filter返回值为筛选数组特性，获取length，罗列出被选中歌手的数量。
2.checkbox的方法 change，事件监听 v-on:change="fn" ，数据绑定 v-bind:checked="xxx"
3.根据全选按钮的checked值，修改数据每一项的checked

4? 页面中v-model="xxx"是一种分装数据绑定和事件监听的结合体，怎么在v-model状态下，添加额外监听事件

---

代码2 （使用v-model的情况下，在额外添加click或者change进行事件监听）

不存在冲突？也不会覆盖v-model的内部事件
不清楚什么状况，代码依然好用

    
    
    
    



    

        

            
                全选
             
         
        

            

                 
                {{item.songer}} 
                {{item.music}}
            
        
        
选中歌手 {{songersNum}} 人