vue做歌曲列表

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>&nbsp;&nbsp;
                    {{singerNum}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</em>位; </span><span>专辑：<em>&nbsp;&nbsp;
                    {{zhuanji}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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
            }
        ];