Vue. js, опции для нескольких классов в v-bind - PullRequest
Новая
       49

Vue. js, опции для нескольких классов в v-bind

2 голосов
/ 10 апреля 2020

Мне нужна помощь, чтобы понять, как задать множественные опции v-bind: class. Я создаю игру Uno, и когда она проходит по вашим картам, она должна смотреть на цвет карт, который есть в списке объектов ex. ([{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;
}

1 Ответ

3 голосов
/ 10 апреля 2020

Поскольку внутри объекта карты есть одно свойство с именем 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>
...