Liste dynamique + style dynamique basé sur la liaison bidirectionnelle vue (code)

Le contenu de cet article concerne la liste dynamique + le style dynamique (code) basé sur la liaison bidirectionnelle vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

D'abord les rendus

Remarque : Les valeurs suivantes​​peuvent être obtenues à partir d'autres endroits. J'écris le. démonstration ici. Bon sang

Sur le schéma logique

Ensuite, allez à la partie code
modèle

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

partie script

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

partie style

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

Remarque : une description détaillée du code marqué est fournie,
pièges qui nécessitent une attention :

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

Recommandations associées :

Le principe de mise en œuvre de la liaison de données bidirectionnelle entre Angular et Vue (le l'accent est mis sur la liaison bidirectionnelle de vue)

Explication détaillée de la liaison bidirectionnelle des données Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!