vue基础之全选，不选
Posted mhxy13867806343
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue基础之全选，不选相关的知识，希望对你有一定的参考价值。
先上效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<style type="text/css">
body{margin: 0;}
.main{
width: 600px;
margin-top: 10px;
margin-left:auto;
margin-right:auto;
}
th{
white-space: nowrap
}
.table{width: 100%;background-color: transparent;border-collapse:collapse;border-spacing:0}
.table th,.table td{padding:8px;line-height:20px;text-align: center;}
.table-border{border-top:1px solid #ddd;}
.table-border th,.table-border td{border-bottom: 1px solid #ddd;}
.table-bg thead{background-color: #f5fafe;}
.table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0}
.table-bordered th,.table-bordered td{border-left:1px solid #ddd}
.table-border.table-bordered{border-bottom:0}
.table-hover tbody tr:hover td{background-color:#f5f5f5}
</style>
<div class="main" id="app">
<table class="table table-border table-bordered table-bg table-hover">
<thead>
<tr>
<th width="25"><input type="checkbox" v-model="issongListAll">全选</th>
<th width="75">歌单</th>
<th width="120">歌手</th>
<th width="80">专辑</th>
</tr>
</thead>
<tbody>
<tr v-for="item,index in songList">
<td><input type="checkbox" v-model="item.checked">{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.song}}</td>
<td>{{item.album}}</td>
</tr>
</tbody>
</table>
<div>
歌手有:{{songLen}}位 专辑有：{{albumSum}}张
</div>
</div>
<script>
let data=[
{
id:Date.now()+Math.random(),
name:‘王杰‘,
song:‘泡沫‘,
checked:false,
album:5
},
{
id:Date.now()+Math.random(),
name:‘王杰2‘,
song:‘泡沫22‘,
checked:false,
album:10
},
{
id:Date.now()+Math.random(),
name:‘王杰22‘,
song:‘泡沫22‘,
checked:false,
album:10
}
]
new Vue({
el:‘#app‘,
data:{
songList:data
},
computed:{
issongListAll:{
//every() 只要数组中的每一个都满足就true,某一项不满足就false
get(){
return this.songList.every(item=>{
return item.checked
})
},
set(val){
this.songList.forEach(item=>item.checked=val)
}
},
songLen(){
return this.songList.filter(item=>item.checked).length
},
albumSum(){
return this.songList.filter(item=>item.checked).reduce((n,j)=>{
return n+j.album
},0)
}
}
})
</script>
</body>
</html>
以上是关于vue基础之全选，不选的主要内容，如果未能解决你的问题，请参考以下文章
Vue3 递归组件 全选或者全不选 重命名组件（不修改文件名称）