音乐菜单要求
1.子菜单 单选，状态
2.歌手选中数量汇总
3.全选，取消全选
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>computed 表单-音乐列表</title>
<style type="text/css">
ul,li,h6 { margin:0; padding:0; font-size:12px; line-height:1.5em;}
li { list-style:none;}
#warp { width:100%; max-width:600px; padding:20px; margin:0 auto;}
#warp h6 { margin-bottom:5px; font-size:14px; line-height:1.5em;}
#warp ul { padding:10px; background:#f1f1f1; border:1px #ccc solid;}
#warp li { padding:3px; border-bottom:1px #ccc solid;}
#warp li.ac { background:#FC0; color:#FFF;}
#warp p { margin-top:10px; padding:5px 10px; background:#f1f1f1; font-size:12px; line-height:1.5em; border:1px #ccc solid;}
</style>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="warp">
<h6>
<label>
<input type="checkbox"
v-on:change="checkAllFn($event)"
v-bind:checked="isAll"
/>全选
</label>
</h6>
<ul>
<li
v-for="(item,index) in msg"
v-bind:class="{ac:item.mchecked==true}"
>
<input type="checkbox"
v-on:change="sonChoose($event,index)"
v-bind:checked="item.mchecked"
/>
<span class="tit">{{item.songer}}</span>
<span class="music">{{item.music}}</span>
</li>
</ul>
<p>选中歌手 {{songersNum}} 人</p>
</div>
<script type="text/javascript">
var _data = [
{
'songer':'张惠妹',
'music':'《Booty Call》',
'mchecked':false
},{
'songer':'周杰伦',
'music':'《布拉格广场》',
'mchecked':false
},{
'songer':'周笔畅',
'music':'《大象之歌》',
'mchecked':false
},{
'songer':'蔡程昱',
'music':'《那就这样吧》',
'mchecked':false
}
];
var vm = new Vue({
el : '#warp',
data : {
'msg' : _data,
'isAll' : false
},
computed:{
//是否全部选中(根据菜单->推算汇总)
/*isCheckAll:function(){
//every 数组中每一项，只要有一项为false,就会false
return this.msg.every(function(item){
return item.mchecked //添加判断条件
});
},*/
//选中歌手人数
songersNum : function(){
return this.msg.filter(function(item){ /*filter返回值为一个符合条件的数组*/
return item.mchecked;
}).length;
}
},
methods:{
//子选项选中
sonChoose:function(ev,index){
var _val = ev.target.checked;
this.msg[index].mchecked = _val;
//全选状态
this.isAll = this.msg.every(function(item){
return item.mchecked //添加判断条件
});
},
//全选
checkAllFn:function(ev){
this.isAll = ev.target.checked;
if(this.isAll){
this.msg.forEach(function(item){
item.mchecked = true;
});
}else{
this.msg.forEach(function(item){
item.mchecked = false;
});
}
}
}
});
</script>
</body>
</html>
页面效果
音乐菜单
实现效果
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的内部事件
不清楚什么状况，代码依然好用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>computed 表单-音乐列表</title>
<style type="text/css">
ul,li,h6 { margin:0; padding:0; font-size:12px; line-height:1.5em;}
li { list-style:none;}
#warp { width:100%; max-width:600px; padding:20px; margin:0 auto;}
#warp h6 { margin-bottom:5px; font-size:14px; line-height:1.5em;}
#warp ul { padding:10px; background:#f1f1f1; border:1px #ccc solid;}
#warp li { padding:3px; border-bottom:1px #ccc solid;}
#warp li.ac { background:#FC0; color:#FFF;}
#warp p { margin-top:10px; padding:5px 10px; background:#f1f1f1; font-size:12px; line-height:1.5em; border:1px #ccc solid;}
</style>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="warp">
<h6>
<label>
<input type="checkbox"
v-model="isAll"
v-on:click="chooseAll($event)"
/>全选
</label>
</h6>
<ul>
<li
v-for="(item,index) in msg"
v-bind:class="{ac:item.mchecked==true}"
>
<input type="checkbox"
v-model="item.mchecked"
v-on:click="chooseSon($event,index)"
/>
<span class="tit">{{item.songer}}</span>
<span class="music">{{item.music}}</span>
</li>
</ul>
<p>选中歌手 {{songersNum}} 人</p>
</div>
<script type="text/javascript">
var _data = [
{
'songer':'张惠妹',
'music':'《Booty Call》',
'mchecked':false
},{
'songer':'周杰伦',
'music':'《布拉格广场》',
'mchecked':false
},{
'songer':'周笔畅',
'music':'《大象之歌》',
'mchecked':false
},{
'songer':'蔡程昱',
'music':'《那就这样吧》',
'mchecked':false
}
];
var vm = new Vue({
el : '#warp',
data : {
'msg' : _data,
'isAll' : false
},
methods:{
//全选，取消全选
chooseAll : function(ev){
if(ev.target.checked==true){
this.msg.forEach(function(item){
item.mchecked = true;
});
}else{
this.msg.forEach(function(item){
item.mchecked = false;
});
};
},
//子菜单：单个选中
chooseSon : function(ev,index){
var _val = ev.target.checked;
this.msg[index].mchecked = _val;
//全选状态 (只要一个为false就返回为false)
this.isAll = this.msg.every(function(item){
return item.mchecked;
});
}
},
computed:{
songersNum:function(){ //选中歌手数量
return this.msg.filter(function(item){
return item.mchecked
}).length;
}
}
});
</script>
</body>
</html>
