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

Question

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

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

这是我到目前为止的想法:

Vue.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;
        },

HTML

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