vue实现复选框多项选择删除代码

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() {
        }
    })
}

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » vue实现复选框多项选择删除代码

发表回复