vue.js單選全選刪除

風靈使發表於2018-09-15
Vue.js

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>
            vue.js單選全選刪除
        </title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="vueBox">
            <div class="music_list" v-for="(item,index) in music_list">
                <input type="checkbox" class="check_box" :id="'id'+item.id" :value="item.id"
                v-model="checkedNames">
                <label :for="'id'+item.id" class="title">
                    {{item.tit}}
                </label>
            </div>
            <!--以下是全選測試-->
            <div class="footer">
                <div class="all_checked">
                    <input type="checkbox" id="allChecked" :checked="checkedNames.length===music_list.length"
                    @click="allChecked">
                    <label for="allChecked" class="title">
                        全選/全不選
                    </label>
                </div>
                <div class="checked_list">
                    已選擇的ID {{checkedNames}}
                </div>
            </div>
            <div class="delete" @click="deleteMusic">
                刪除
            </div>
        </div>
        <script src="js/vue.min.js">
        </script>
        <script src="js/vue.index.js">
        </script> 
    </body>

</html>

vue.index.js

var vm = new Vue({
    el: ".vueBox",
    data: {
        checkedNames: [],
        music_list: [],
        all_cheched: false,
    },
    computed: {

},
    created: function() {

},
    mounted: function() {
        this.getMusic();
    },
    methods: {
        allChecked: function() {
            if (this.checkedNames.length === this.music_list.length) {
                // 全不選
                this.checkedNames = [];

            } else {
                this.checkedNames = [];
                // 全選
                this.music_list.forEach((item) = >{
                    this.checkedNames.push(item.id); // 與checkbox的value統一
                })
            }
        },
        getMusic: function() {
            var music_list = [{
                "cov": "http://img1.kuwo.cn/star/starheads/240/34/11/220267175.jpg",
                "voi": "http://other.web.ra01.sycdn.kuwo.cn/resource/n3/192/19/57/297064714.mp3",
                "tit": "獨自去偷歡-劉德華",
                "lrcUrl": "audio/lrc/dzqth.lrc",
                "id": 'dzqth'
            },
            {
                "cov": "http://img4.kuwo.cn/star/starheads/240/61/54/2102134023.jpg",
                "voi": "http://other.web.ra01.sycdn.kuwo.cn/resource/n2/192/69/30/1696331887.mp3",
                "tit": "頭髮亂了-張學友",
                "lrcUrl": "audio/lrc/tfll.lrc",
                "id": 'tfll'
            },
            {
                "cov": "http://star.kuwo.cn/star/starheads/180/44/10/3787691319.jpg",
                "voi": "http://other.web.ra01.sycdn.kuwo.cn/resource/n1/192/23/45/2735055960.mp3",
                "tit": "浮誇-陳奕迅",
                "lrcUrl": "audio/lrc/fk.lrc",
                "id": 'fk'
            },
            {
                "cov": "http://img4.kuwo.cn/star/starheads/240/1/0/3016067007.jpg",
                "voi": "http://other.web.rf01.sycdn.kuwo.cn/resource/n2/66/79/3849065227.mp3",
                "tit": "匆匆那年-王菲",
                "lrcUrl": "audio/lrc/ccnn.lrc",
                "id": 'ccnn'
            },
            {
                "cov": "http://img2.kuwo.cn/star/starheads/240/70/47/1808655553.jpg",
                "voi": "http://other.web.rb01.sycdn.kuwo.cn/resource/n3/28/23/4233584092.mp3",
                "tit": "愛久見人心-梁靜茹",
                "lrcUrl": "audio/lrc/ajjrx.lrc",
                "id": 'ajjrx'
            },
            {
                "cov": "http://img2.kuwo.cn/star/starheads/240/71/48/2963446299.jpg",
                "voi": "http://other.web.ra01.sycdn.kuwo.cn/resource/n2/192/11/54/2132876119.mp3",
                "tit": "後來-劉若英",
                "lrcUrl": "audio/lrc/hl.lrc",
                "id": 'hl'
            }];
            this.music_list = music_list
        },
        deleteMusic: function() {
            var music_list = this.music_list;
            var checkedNames = this.checkedNames;
            /*迴圈查詢選中項*/
            checkedNames.forEach(function(item, index) {
                music_list.forEach(function(music, i) {
                    if (music.id == item) {
                        music_list.splice(i, 1);
                    }
                });
            }) this.music_list = music_list;
            this.checkedNames = []
        }
    }

});

style.css

/* css reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, a, input, button, p,img,span {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ol, ul, li {
    list-style: none;
}

a {
    text-decoration: none;
}


.music_list ,.all_checked {
    position: relative;
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    display: flex;
    align-items: center;
}

.title {
    margin-left: 10px;
}

.checked_list {
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    display: flex;
    align-items: center;
}

.delete {
    width: 200px;
    text-align: center;
    padding: 5px 20px;
    border-radius: 5px;
    border: 1px solid salmon;
    margin-left: 5px;
    margin-top: 10px;
    background-color: salmon;
    color: #fff;
}

.delete:hover {
    background-color: #fc4a20;
}

執行結果如圖:

這裡寫圖片描述

相關文章