vue下的checkbox控制（全选，反选，及统计选中个数）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.list-body li:nth-child(even) {
background: yellow;
}
.list-body li:nth-child(odd) {
background: #fff;
}
.list-body li:hover {
background: green;
}
.list-body li.checkedColor {
background: green;
}
</style>
<link rel="stylesheet" type="text/css" href="css/baidu.css"/>
<script src="../vue.js"></script>
</head>
<body>
<div class="wrap" id="app">
<div class="baidu">
<ul class="list list-head">
<li>
<div><input type="checkbox" v-model="isCheckedAll"/>全选</div>
<span>歌单</span>
<span>歌⼿</span>
<span>专辑</span>
</li>
</ul>
<ul class="list list-body">
<!-- <li class="checkedColor" v-for="item in data"> -->
<li class="" v-for="item in songList">
<div>
<input type="checkbox" v-model="item.checked"/>
</div>
<span>{{ item.song }}</span>
<span>{{ item.name }}</span>
<span>{{ item.album }}</span>
</li>
</ul>
<div class="select">
<span class="selectAll">
<span>统计：</span>
</span>
<div class="others">
<span><em></em>歌⼿有：{{ selectSongersLen }}位</span>
<span><em></em>专辑有{{ albums }}张</span>
</div>
</div>
</div>
</div>
<script>
let data = [
{
id: w() + Math.random(),
name: "邓紫棋",
song: "泡沫",
checked: true,
album: 10
},
{
vue中reactiveid: w() + Math.random(),
name: "王杰",
song: "泡沫",
checked: true,
album: 10
},
{
id: w() + Math.random(),
name: "邓紫棋",
song: "泡沫",
checked: true,
album: 10
}
];
new Vue({
el: "#app",
data: {
songList: data
},
computed: {
// 只能取值，不能设置值，为函数
//  isCheckedAll() {
//    let bl = this.songList.every(item => {
//      return item.checked;
//    });
//    //  let bl=this.songList.every(function(item){return item.checked});
//    return bl;
//    console.log(bl);
/
/  },
//  改为对象，可设置，可取值
isCheckedAll: {
get() {
let bl = this.songList.every(item => {
return item.checked;
});
return bl;
console.log(bl);
},
set(newVal) {
console.log("newVal",newVal);
// 利⽤表头的全选单选框控制分表⾥每⼀个信息的选择状态，所以遍历每⼀项统⼀kongzhi
this.songList.forEach(item=>item.checked=newVal);
}
},
selectSongersLen() {
// return this.songList.filter(item => item.checked).length;
let songer = this.songList.filter(item => item.checked);
console.log("songer", songer);
// songer (3) [{…}, {…}, {…}]0: {…}album: (...)checked: (...)id: (...)name: (...)song: (...)__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}get album: ƒ reactiveGetter()set album: ƒ reactiveSetter(newVal)get checked: ƒ reactiveGetter()se return fn(songer).length;
},
albums() {
let n = 0;
this.songList
.filter(item => item.checked)
.forEach(item => {
n += item.album;
});
return n;
console.log(n);
}
}
});
function fn(option) {
var json = {};
var arr = [];
option.forEach(item => {
console.log("json[item.name]", json[item.name]);
console.info("json", json);
if (!json[item.name]) {
json[item.name] = true;
arr.push(item);
}
});
// console.log(arr);
return arr;
}
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。