脚本宝典收集整理的这篇文章主要介绍了

动态列表+动态样式(vue双向绑定)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

先上效果图
图片描述

注:下面的几个值可以从其他地方获取,这边演示我是写死的

在上逻辑图
图片描述

接着上代码
template部分

<template>
    <div >
        <div>
            <span>选择的选项:</span>
            <span v-for="item in selectlistlabel" style="margin-left: 10px;">{{item}}</span>
        </div>
        //choose事件绑定写在最外层应用的js的事件委托,如果有不知道的可以参考我的一篇关于事件委托的文章
        <div @click="choose" v-for="item in list">
            <div  v-bind:class="[selectlistvalue.indexOf(item.value)>-1?activeclass:'']" :label="item.label" :value="item.value" style="margin: 5px auto;width: 100px;height: 38px;border:1px solid #e9eaec;line-height: 38px;border-radius: 5px;">
                {{item.label}}
            </div>
        </div>
        
    </div>
</template>

script部分

<script>
export default {
        name: 'HelloWorld',
        data() {
            return {
                selectlistlabel:[],            //用来展示是选项
                selectlistvalue:[],            //展示选项的值
                list: [                      //实际当中这部分数据为后台获取,现在为了方便写几个演示用
                    {value: 'New York',label: 'New York'},
                    {value: 'London',label: 'London'},
                    {value: 'Sydney',label: 'Sydney'},
                    {value: 'Ottawa',label: 'Ottawa'},
                    {value: 'Paris',label: 'Paris'},
                    {value: 'Canberra',label: 'Canberra'}
                ],
            }
        },
        computed:{
            activeclass: function() {
                return 'active'
            },
        },
        methods:{
                choose:function(e){
                    let dom = e.target;
                    //获取绑定在dom上的数据
                    var domvalue = dom.getAttribute("value");
                    var domlabel = dom.getAttribute("label");
                    //如果点到空白地方
                    if(dom.getAttribute("label") == null){
                        return;
                    }
                    //如果点击的对象的值已经在数组里面了,则把他从数组中删除
                    //否则就把他添加到数组里面去
                    if(dom.getAttribute("class") == "active"){
                        for(let i = 0;i<this.selectlistvalue.length;i++){
                            if(this.selectlistvalue[i] == domvalue){
                                this.selectlistvalue.splice(i,1)
                            }
                        }
                        for(let i = 0;i<this.selectlistlabel.length;i++){
                            if(this.selectlistlabel[i] == domlabel){
                                this.selectlistlabel.splice(i,1)
                            }
                        }
                    }else{
                        this.selectlistvalue.push(domvalue)
                        this.selectlistlabel.push(domlabel)
                    }
                },
      } 
    }
</script>

style部分

<style scoped>
   .active{
        background-color: #0ccfbf;
        color: white;
    }
</style>

注:详细说明标注代码上了,
需要注意的坑:

1.activeclass需要在computed里面把他return出来,否则加载不到样式。
2.对数组的操作方法,简单点使用vue支持的变异方法(否则vue无法检测到数组变化,也就无法动态绑定)
官网截了一小段图

图片描述

总结

以上是脚本宝典为你收集整理的

动态列表+动态样式(vue双向绑定)

全部内容,希望文章能够帮你解决

动态列表+动态样式(vue双向绑定)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过