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

【问题标题】：Vue.js, options for multiple classes on v-bindVue.js，v-bind 上多个类的选项
【发布时间】：2020-07-23 16:03:27
【问题描述】：

我需要一些帮助来弄清楚如何为 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;
}

【问题讨论】：

我在 id 建议使用 :class:'card.Color' 时犯了一个错误，这不起作用，所以我使用样式绑定编辑了我的答案

标签： javascript html vue.js vuejs2 vue-component

【解决方案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>

【讨论】：