1.显示效果
2.html
<div id="app">
<ul>
<li>
<span><input type="checkbox" v-model="Calculation" />全选</span>
<span>歌曲</span> <span>歌手</span> <span>专辑</span>
</li>
<li v-for="item,i in newData" v-bind:style="{background:item.onOff?'#faf':''}">
<span><input v-model="item.onOff" type="checkbox" /></span>
<span>{{ item.songName }}</span>
<span>{{ item.songer }}</span>
<span>{{ item.num }}</span>
</li>
</ul>
<div class="xuan">
统计:<span>选中歌手:<em>
{{singerNum}} </em>位; </span><span>专辑:<em>
{{zhuanji}} </em>张</span>
</div>
</div>
3.css
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#app {
width: 397px;
margin: 100px auto 0;
}
ul {
border-bottom: 1px solid #555;
}
#app li {
height: 30px;
line-height: 30px;
border-top: 1px solid #555;
border-left: 1px solid #555;
}
#app li span {
float: left;
text-align: center;
width: 98px;
border-right: 1px solid #555;
}
#app li span input {
float: left;
margin: 8px;
}
</style>
4.js
var vm = new Vue({
el: "#app",
data: {
newData,
},
computed: {
// 计算属性
/* Calculation() {
return this.newData.every((item) => item.onOff)
} */
Calculation: {
get() {
return this.newData.every((item) => item.onOff)
},
set(value) {
if (value) {
panduan(value);
} else {
panduan(value);
}
}
},
singerNum() {
var arr = this.newData.filter(function (item) {
return item.onOff == true;
})
var arr1 = [];
for (let i = 0; i < arr.length; i++) {
arr1.push(arr[i].songer)
}
// console.log(arr1);
// 数组去重
var newArr = [];
for (let i = 0; i < arr1.length; i++) {
var onOff = true;
if (onOff) {
for (let j = 0; j < newArr.length; j++) {
if (newArr[j] === arr[i].songer) {
onOff = false;
break;
}
}
}
if (onOff) {
newArr.push(arr[i].songer);
}
}
return newArr.length;
},
zhuanji() {
var arr = this.newData.filter(function (item) {
return item.onOff == true;
})
var aNum = 0;
for (let i = 0; i < arr.length; i++) {
aNum += arr[i].num;
}
return aNum;
}
}
});
function panduan(value) {
this.newData.forEach(element => {
element.onOff = value;
});
}
5.数据
// 数据
var newData = [{
onOff: true,
songName: "七里香0",
songer: "周杰伦0",
num: 1,
index: -1
},
{
onOff: false,
songName: "七里香1",
songer: "周杰伦0",
num: 1,
index: -1
},
{
onOff: true,
songName: "七里香2",
songer: "周杰伦2",
num: 2,
index: -1
},
{
onOff: false,
songName: "七里香3",
songer: "周杰伦3",
num: 3,
index: -1
},
{
onOff: false,
songName: "七里香3",
songer: "周杰伦3",
num: 3,
index: -1
},
{
onOff: false,
songName: "七里香3",
songer: "周杰伦3",
num: 3,
index: -1
},
{
onOff: false,
songName: "七里香3",
songer: "周杰伦3",
num: 3,
index: -1
},
{
onOff: false,
songName: "七里香4",
songer: "周杰伦4",
num: 4,
index: -1
}
];