vue实现复选框多项选择删除代码
vue 实现复选框多项选择删除代码
HTML 代码
<script src="https://s1.pstatp.com/cdn/expire-1-M/vue/2.2.2/vue.min.js"></script>/*当前为字节跳动 cdn 公共库提供的 vue-2.2.2*/ <div id="app"> <div class="container"> <div class="row"> <div class="col-xs-6 clo-sm-6"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">省份({{adress.length}} / 当前选中({{newAdress.length}})</h3> </div> <div class="panel-body panel-height"> <ul> <li :class="v.flag? 'selectde':''" v-for="(v,i) in adress" :key="i" @click="add(v)">{{v.name}}</li> </ul> </div> </div> </div> <div class="col-xs-6 col-sm-6"> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">已选中省份({{newAdress.length}})</h3> </div> <div class="panel-body panel-height"> <ul> <li v-for="(v,i) in newAdress" :key="i" @mouseover="flag = i" @mouseout="flag='hide'">{{v.name}} <span class="del" @click="del(v,i)" v-show="flag==i">x</span></li> </ul> </div> </div> </div> </div> </div> </div>
CSS 代码
.panel-height ul { overflow: hidden; } .panel-height ul li { width: 75px; height: 25px; line-height: 25px; text-align: center; float: left; background-color: rgb(56,145,94); color: #fff; margin-left: 10px; list-style-type: none; border: 1px solid rgb(67,122,91); } .del { padding-left: 10px; } .selectde { border: 1px solid #be0000 !important; color: #be0000 !important; }
JS 代码
window.onload = function() { new Vue({ el: "#app", data: { adress: [{ name: "北京市", flag: false, id: 0 }, { name: "上海市", flag: false, id: 1 }, { name: "重庆市", flag: false, id: 2 }, { name: "天津市", flag: false, id: 3 }, { name: "湖北省", flag: false, id: 4 }, { name: "四川省", flag: false, id: 5 }, ], newAdress: [], flag: 'hide', //关闭隐藏 }, methods: { add(v) { v.flag = true; //高亮状态 //es5 去重 // for(var i = 0;i<this.newAdress.length;i++){ // if(v.id == this.newAdress[i].id){ // return; // } // } //es7 //this.newAdress = [...new Set(this.newAdress)] es7 去重 // filter 去重 var id = this.newAdress.filter(function(i) { return i.id == v.id; }) if (id.length > 0) return; this.newAdress.push(v); }, del(v, i) { this.newAdress.splice(i, 1); this.adress.forEach(element => { if (element.id == v.id) { v.flag = false; } }); } }, mounted: function() { } }) }
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue实现复选框多项选择删除代码
码云笔记 » vue实现复选框多项选择删除代码