基於vue雙向繫結實現的動態列表+動態樣式（代碼）

本篇文章給大家帶來的內容是關於基於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無法檢測到數組變化，也就無法動態綁定）官網截了一小段圖