vue实现全选反选--简单使用
程序员文章站
2022-06-07 14:35:59
最近需要用到vue的反选全选功能，于是就在网上找了一些代码实现，发现都不能够完美的实现。于是乎决定自己写出一套。经过一翻努力，完美了进行了实现。bug也已经修复完毕，希望能够帮助到大家！
最近需要用到vue的反选全选功能，于是就在网上找了一些代码实现，发现都不能够完美的实现。于是乎决定自己写出一套。经过一翻努力，完美了进行了实现。bug也已经修复完毕，希望能够帮助到大家！
<!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.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.1/axios.js"></script>
</head>
<body>
<div id="dd">
<button @click="checkanti">反选</button>
<button @click="checkall">全选</button>
<button @click="checknone">全不选</button>
<table>
<tr v-for="l in list">
<td><input type="checkbox" class="cd" checked="checked" :value="l" v-model="ck"></td>
</tr>
</table>
<span v-text="new date().gettime()"></span>
{{da}}
{{ck}}
</div>
<script type="text/javascript">
var s = new vue({
el:"#dd",
data:{
list:[10,22,3,4,5,69,70],
ck:[],
ss:"2019-05-26",
da:new date("2019-08-12").gettime()
},
methods: {
checknone() {
this.ck=[]
},
checkall() {
this.ck=[]
is=this;
this.list.foreach(i=>{
is.ck.push(i)
})
},
checkanti() {
is = this;
this.list.foreach(item => {
if(is.ck.indexof(item)!=-1){
is.ck.splice(is.ck.indexof(item),1);
}else{
is.ck.push(item)
}
})
}
}
})
</script>
</body>
</html>