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实现复选框多项选择删除代码的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。