Vue 양방향 바인딩을 기반으로 하는 동적 목록 + 동적 스타일(코드)

이 글의 내용은 Vue 양방향 바인딩을 기반으로 한 동적 목록 + 동적 스타일(코드)에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

첫 번째, 렌더링

참고: 다음 값은 다른 곳에서 얻을 수 있습니다. 여기에 데모를 하드 코딩했습니다.

그런 다음 논리 다이어그램

그런 다음 코드
템플릿 부분

<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>
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>
   .active{
        background-color: #0ccfbf;
        color: white;
    }
</style>

참고: 자세한 지침은 코드에 표시되어 있으며
주의해야 할 부분:

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

관련 권장 사항:

Angular 및 Vue 양방향 데이터 바인딩 구현 원리(vue의 양방향 바인딩에 중점을 둡니다)

Vue 데이터의 양방향 바인딩에 대한 자세한 설명

위 내용은 Vue 양방향 바인딩을 기반으로 하는 동적 목록 + 동적 스타일(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!