Heim  >  Artikel  >  Web-Frontend  >  Dynamische Liste + dynamischer Stil (Code) basierend auf der bidirektionalen Vue-Bindung

Dynamische Liste + dynamischer Stil (Code) basierend auf der bidirektionalen Vue-Bindung

不言
不言Original
2018-09-10 17:15:412262Durchsuche

Der Inhalt dieses Artikels handelt von dynamischer Liste + dynamischem Stil (Code), der auf der bidirektionalen Bindung von Vue basiert. Ich hoffe, dass er für Sie hilfreich ist.

Zuerst die Darstellungen

Dynamische Liste + dynamischer Stil (Code) basierend auf der bidirektionalen Vue-Bindung

Hinweis: Die folgenden Werte können von anderen Stellen bezogen werden, die ich schreibe Demonstration hier. Verdammt

Auf dem Logikdiagramm

Dynamische Liste + dynamischer Stil (Code) basierend auf der bidirektionalen Vue-Bindung

Dann gehe zum Code
Vorlagenteil

rrree

Skriptteil

<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>

Stilteil

<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>

Hinweis: Detaillierte Anweisungen sind im Code markiert
Fallstricke, die Aufmerksamkeit erfordern:

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

Dynamische Liste + dynamischer Stil (Code) basierend auf der bidirektionalen Vue-Bindung

Verwandte Empfehlungen:

Das Implementierungsprinzip der bidirektionalen Datenbindung zwischen Angular und Vue (der Schwerpunkt liegt auf der bidirektionalen Bindung von vue)

Detaillierte Erläuterung der bidirektionalen Bindung von Vue-Daten

Das obige ist der detaillierte Inhalt vonDynamische Liste + dynamischer Stil (Code) basierend auf der bidirektionalen Vue-Bindung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn