Vue.js，v-bind 上多个类的选项

Question

我需要一些帮助来尝试弄清楚如何为 v-bind:class 提供多个选项。

我的 Uno 游戏在循环遍历您的卡片时，需要查看对象列表中的卡片颜色。([{ Color: green, Value: 6}]并确定卡片的文字颜色。

这是我到目前为止所想出的：

视图.js

getClass: function(card){

            var result = [];

            console.log(card);

            if (card.Color == "red"){

                result.push('red');

            }else if (card.Color == "green"){

                result.push('green');

            }else if (card.Color == "blue"){

                result.push('blue');

            }else if(card.Color == "yellow"){

                result.push('yellow');

            }

            console.log(result);

            return result;

        },

超文本标记语言

<ul id="myCards">

        <button id="myCard" v-for="card in myCards" v-bind:class="getClass(card)" 

         @click="playCard(card)">

         {{card.Color}} {{card.Value}}

        </button>

</ul>

CSS

ul{

    text-align: left;

}

#myCards{

    padding: none;

}

#myCard{

    display: inline-block;

    height: 100px;

    width: 70px;

    border: 1px solid black;

    color: black;

    border: 2px solid black;

    border-radius: 6px;

    background-color: white;

    color: black;

    vertical-align: middle;

    margin: 5px;

}

.red{

    color: red;

}

.green{

    color: green;

}

.blue{

    color: blue;

}

.yellow{

    color: yellow;

}

Answer 1

Color由于您可以使用卡片对象内部调用的一个属性style object syntax，并且不需要为每种颜色定义类：<ul id="myCards">        <button id="myCard" v-for="card in myCards"          @click="playCard(card)">         {{card.Color}} {{card.Value}}        </button></ul>Vue.config.devtools = false;Vue.config.productionTip = false;let app = new Vue({  el: "#app",  data() {    return {      myCards: [{          Value: 'card 1',          Color: 'red'        },        {          Value: 'card 2',          Color: 'blue'        },      ]    }  },  methods: {  }})ul {  text-align: left;}#myCards {  padding: none;}#myCard {  display: inline-block;  height: 100px;  width: 70px;  border: 1px solid black;  color: black;  border: 2px solid black;  border-radius: 6px;  background-color: white;  color: black;  vertical-align: middle;  margin: 5px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">  <ul id="myCards">    <button id="myCard" v-for="card in myCards" :style="{color:card.Color}">         {{card.Value}}        </button>  </ul></div>