勾选

多个单个勾选
<template>

    <div>
  
        <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>
  
    </div>
  
  </template>
  
   
  
  <script>
  
  export default {
  
  
  
   
  
    data() {
  
      return {
         checkedNames:[],
         music_list:[],
         all_checked:false,
      }
  
    },
    computed:{

    },
    created(){

    },
    mounted(){
        this.getMusic();
    },
    methods:{
        //全选
        allChecked(){
           if(this.checkedNames.length===this.music_list.length){
                this.checkedNames=[];
           }else{
               this.checkedNames=[];
               this.music_list.forEach((item)=>{
                   this.checkedNames.push(item.id);
               })
           }
        },
        //请求数据方法
        getMusic(){
            var music_list=[
                {"cov":"111","voi":"1_222","tit":"1_333","lrcUrl":"1_444","lrcUrl":"1_555","id":"dzqth"},
                {"cov":"222","voi":"2_222","tit":"2_333","lrcUrl":"2_444","lrcUrl":"2_555","id":"tfll"},
                {"cov":"333","voi":"3_222","tit":"3_333","lrcUrl":"3_444","lrcUrl":"3_555","id":"fk"},
                {"cov":"444","voi":"4_222","tit":"4_333","lrcUrl":"4_444","lrcUrl":"4_555","id":"ccnn"},
                {"cov":"555","voi":"5_222","tit":"5_333","lrcUrl":"5_444","lrcUrl":"5_555","id":"ajjrx"},
                {"cov":"666","voi":"6_222","tit":"6_333","lrcUrl":"6_444","lrcUrl":"6_555","id":"hl"},

            ];
            this.music_list=music_list
        },
        //删除方法
        deleteMusic(){
            var music_list=this.music_list;
            var checkedNames=this.checkedNames;
            checkedNames.forEach(function(item,index){
                music_list.forEach(function(music,i){
                    console.log(music)
                    if(music.id==item){
                       music_list.splice(i,1)
                    }
                });
            })
            this.music_list=music_list;
            this.checkedNames=[]
        }
    }

    
  
   
  
  
   
  
  
  };
  
  </script>
  
  <style scoped>
  
  /* 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;
     100%;
    padding: 5px;
    margin-top: 5px;
    display: flex;

    align-items: center;
}
.title{
    margin-left: 10px;
}
.checked_list {
     100%;
    padding: 5px;
    margin-top: 5px;
    display: flex;
    align-items: center;
}
.delete{
     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;
}
  
  </style>