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

Question

我正在尝试使用索引（在v-for中）在vuejs中创建动态类，但似乎无法正常工作，有人可以建议我该怎么做吗？

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

'GiallaSoto'变量始终为true。但是我宣布它是假的

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

我认为是与正确的sintax相关的东西

Answer 1

使用对象语法，结合属性方法从数据中获取正确的值。

＆＃13;

＆＃13;

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]
      }
    }
  }
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;