Home >Web Front-end >JS Tutorial >Dynamic list + dynamic style (code) based on vue two-way binding

Dynamic list + dynamic style (code) based on vue two-way binding

不言
不言Original
2018-09-10 17:15:412298browse

The content of this article is about the dynamic list dynamic style (code) based on vue two-way binding. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First the renderings

Dynamic list + dynamic style (code) based on vue two-way binding

Note: The following values ​​​​can be obtained from other places. I am writing the demonstration here. Damn it

First upload the logic diagram

Dynamic list + dynamic style (code) based on vue two-way binding

Then add the code
template part

<template>
    <div>
        <div>
            <span>选择的选项:</span>
            <span>{{item}}</span>
        </div>
        //choose事件绑定写在最外层应用的js的事件委托,如果有不知道的可以参考我的一篇关于事件委托的文章
        <div>
            <div>-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 part

<script>
export default {
        name: &#39;HelloWorld&#39;,
        data() {
            return {
                selectlistlabel:[],            //用来展示是选项
                selectlistvalue:[],            //展示选项的值
                list: [                      //实际当中这部分数据为后台获取,现在为了方便写几个演示用
                    {value: &#39;New York&#39;,label: &#39;New York&#39;},
                    {value: &#39;London&#39;,label: &#39;London&#39;},
                    {value: &#39;Sydney&#39;,label: &#39;Sydney&#39;},
                    {value: &#39;Ottawa&#39;,label: &#39;Ottawa&#39;},
                    {value: &#39;Paris&#39;,label: &#39;Paris&#39;},
                    {value: &#39;Canberra&#39;,label: &#39;Canberra&#39;}
                ],
            }
        },
        computed:{
            activeclass: function() {
                return &#39;active&#39;
            },
        },
        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 part

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

Note: Detailed description of the marked code is provided,
Pitfalls that need attention:

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

Dynamic list + dynamic style (code) based on vue two-way binding

Related recommendations:

The implementation principle of two-way data binding between Angular and Vue (the focus is on the two-way binding of vue)

Detailed explanation of Vue data two-way binding

The above is the detailed content of Dynamic list + dynamic style (code) based on vue two-way binding. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn