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 >
        <div >
            <div >
                <div >
                    <div >
                        <h3 >省份({{adress.length}} / 当前选中({{newAdress.length}})</h3>
                    </div>
                    <div >
                        <ul>
                            <li : v-for="(v,i) in adress" :key="i" @click="add(v)">{{v.name}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div >
                <div >
                    <div >
                        <h3 >已选中省份({{newAdress.length}})</h3>
                    </div>
                    <div >
                        <ul>
                            <li v-for="(v,i) in newAdress" :key="i" @mouseover="flag = i" @mouseout="flag='hide'">{{v.name}}
                                <span  @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() {
        }
    })
}