vue选择元素-全选-单选-删除选中
vue选择元素-全选-单选-删除选中
html:
<div class="vueBox"> <div class="music_list"> <input type="checkbox" class="check_box"> <label class="title"></label> </div> <div class="footer"> <div class="all_checked"> <input type="checkbox" id="allChecked"> <label for="allChecked" class="title">全选/全不选</label> <audio src="" controls></audio> </div> <div class="checked_list"> 已选择的ID </div> </div> <div class="delete">删除</div> </div>
css:
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;
}vuejs:
<script src="js/vue.js"></script>
<script>
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)=>{
//与checkbox的value统一
this.checkedNames.push(item.id);
})
}
},
getMusic:function(){
var music_list = [
{
"id": 'dzqth',
"cov": "img/dzqth.jpg",
"voi":"music/dzqth.mp3",
"tit": "独自去偷欢-刘德华"
},
{
"id": 'tfll',
"cov": "img/tfll.jpg",
"voi":"music/tfll.mp3",
"tit": "头发乱了-张学友"
},
{
"id": 'fk',
"cov": "img/fk.jpg",
"voi":"music/fk.mp3",
"tit": "浮夸-陈奕迅"
},
{
"id": 'ccnn',
"cov": "img/ccnn.jpg",
"voi":"music/ccnn.mp3",
"tit": "匆匆那年-王菲"
},
{
"id": 'hl',
"cov": "img/hl.jpg",
"voi":"music/hl.mp3",
"tit": "后来-刘若英"
}
];
this.music_list = music_list;
},
deleteMusic:function(){
var music_list = this.music_list;
var checkedNames = this.checkedNames;
/*遍历循环查找选中项*/
checkedNames.forEach((item,index)=>{
music_list.forEach((music,i)=>{
if(music.id == item){
music_list.splice(i,1);
}
});
})
this.music_list = music_list;
this.checkedNames = [];
}
}
});
</script>
