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() {
        }
    })
}
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » vue实现复选框多项选择删除代码

发表评论

提供最优质的资源集合

立即查看 了解详情