vue点击多选
vue点击多选，之前项目需求中就有用过，最近又遇到了，抽时间写个demo记录下 如有不对还请指出纠正，同样如果有更好的解决方法，欢迎大家留言交流，
直接放全部代码吧，我引的vue element，可直接运行看效果，但是记得自己本地引一下
没有动图 放张图片大家自行脑补一下吧哈哈
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="../css/vue.css"> 8 <link rel="stylesheet" href="../css/index.css"> 9 <link rel="stylesheet" href="../css/reast.css"> 10 <style> 11 /* v-cloak vue解决刷新时出现{{}}闪烁 */ 12 [v-cloak] { 13 display: none !important; 14 } 15 .OptionsRow{ 16 width: 400px; 17 height: 200px; 18 background: #cccccc; 19 padding: 20px 30px; 20 } 21 .OptionsRow ul{ 22 margin-bottom: 20px; 23 } 24 .OptionsRow ul li{ 25 display: inline-block; 26 line-height: 20px; 27 padding: 0 12px; 28 color: #000000; 29 margin-right:10px; 30 background: #ffffff; 31 cursor: pointer; 32 border-radius: 5px; 33 position: relative; 34 } 35 .OptionsRow ul li i{ 36 position: absolute; 37 top: -5px; 38 right: -5px; 39 } 40 41 </style> 42 </head> 43 <body> 44 <div id="app" v-cloak> 45 <div class="OptionsRow"> 46 <ul> 47 <li v-for="(item,index) in typeMind" :key="index" @click="getseclect(item,index)"> 48 {{item.name}} 49 <i class="el-icon-check" v-if="item.selected"></i> 50 <i class="el-icon-close" v-else></i> 51 </li> 52 </ul> 53 <el-row> 54 <el-button size="mini" @click="getCheckAll()">{{isCheckAll?'取消全选':'选择全部'}}</el-button> 55 </el-row> 56 </div> 57 </div> 58 59 60 </body> 61 <script src="../js/vue.js"></script> 62 <script src="../js/index.js"></script> 63 <script> 64 var app=new Vue({ 65 el:'#app', 66 data:{ 67 typeMind:[ 68 {name:"小白1",value:1}, 69 {name:"小白2",value:2}, 70 {name:"小白3",value:3}, 71 {name:"小白4",value:4}, 72 ], 73 typeMind2:[], 74 isCheckAll:false 75 76 }, 77 created(){ 78 for(var i =0;i<this.typeMind.length;i++){ //循环数据添加selected,如果是后台返回的数据添加不了selected参数的话 可以请求接口时候自行循环添加 79 this.typeMind[i].selected = false 80 } 81 console.log(this.typeMind) 82 }, 83 methods:{ 84 // 经测试可以正常使用 85 // getseclect(item,index){ 86 // this.$set(this.typeMind,index,item) 87 // if(!item.selected){ 88 // item.selected = true 89 // this.typeMind2.push(item.name) 90 // }else{ 91 // item.selected = false 92 // this.typeMind2 = [] 93 // for(var i =0;i<this.typeMind.length;i++){ 94 // if(this.typeMind[i].selected == true){ 95 // this.typeMind2.push(this.typeMind[i].name) 96 // } 97 // } 98 // } 99 // console.log(this.typeMind2) 100 101 // } 102 103 // 经测试可以正常使用 104 // getseclect(item,index){ 105 // this.$set(this.typeMind,index,item) //更新 106 // this.typeMind[index].selected = !this.typeMind[index].selected; 107 // this.typeMind2 = [] 108 // for(var i =0;i<this.typeMind.length;i++){ 109 // if(this.typeMind[i].selected == true){ 110 // this.typeMind2.push(this.typeMind[i].name) 111 // } 112 // } 113 // if(this.typeMind2.length == this.typeMind.length){ 114 // this.isCheckAll = true 115 // }else{ 116 // this.isCheckAll = false 117 // } 118 // console.log( this.typeMind2) 119 // }, 120 121 getseclect(item,index){ 122 this.$set(this.typeMind,index,item) //更新 123 if(!item.selected){ 124 item.selected = true 125 this.typeMind2.push(item.name) 126 }else{ 127 item.selected = false 128 let d = this.typeMind2.indexOf(item.name) //找到当前点击项的下标 129 this.typeMind2.splice(d,1)//删除此项 130 } 131 // 全选按钮判断 132 if(this.typeMind2.length == this.typeMind.length){ 133 this.isCheckAll = true 134 }else{ 135 this.isCheckAll = false 136 } 137 console.log( this.typeMind2) 138 }, 139 getCheckAll(){ 140 if(!this.isCheckAll){ 141 this.typeMind2 = [] 142 for(var item of this.typeMind){ 143 item.selected = true 144 this.typeMind2.push(item.name) 145 } 146 this.isCheckAll = true 147 }else{ 148 for(var item of this.typeMind){ 149 item.selected = false 150 this.typeMind2=[] 151 } 152 this.isCheckAll = false 153 } 154 155 } 163 } 164 }) 165 166 </script> 167 </html>
参考以下文章eg：
https://segmentfault.com/a/1190000016313367
https://www.oschina.net/question/3467882_2306340
https://blog.csdn.net/qq_42172829/article/details/88668266
