vue 2如何在v-bind:class ternary中传递索引变量？

Question

我正在尝试使用索引(在v-for中)在vuejs中创建动态类，但似乎不能正常工作，有人能建议我怎么做吗？

v-bind:class="['GiallaSoto'+index ? 'minus' : !'GiallaSoto'+index, 'plus']" 

'GiallaSoto‘变量始终为真。然而，我声明它为false

    data: function(){
    return{
        servizioAggiunto : '',
        'GiallaDesc':false,
        'GiallaTutti':false,
        'GiallaSoto0':false,
        'GiallaSoto1':false,
        'GiallaSoto2':true,
        'GiallaSoto3':false,
    }
}

我想是与正确的中国税有关的东西。

Answer 1

使用object语法，并结合使用方法从数据中获取正确的值。

​

console.clear()


new Vue({
  el:"#app",
  data: function(){
    return{
      servizioAggiunto : '',
      'GiallaDesc':false,
      'GiallaTutti':false,
      'GiallaSoto0':false,
      'GiallaSoto1':false,
      'GiallaSoto2':true,
      'GiallaSoto3':false,
    }
  },
  methods:{
    getClass(val, index){
      return {
        minus: !this['GiallaSoto'+index],
        plus: this['GiallaSoto'+index]
      }
    }
  }
})

.minus{
  background-color: red;
}
.plus{
  background-color: green;
}

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <div v-for="index in 4" 
       :class="getClass('GiallaSoto', index - 1)" >
    {{index}}
  </div>
</div>

​