vue 2 v-bindでインデックス変数を渡す方法：class ternary？

Question

私はvuejsで動的クラスを作成するためにインデックスを使用しようとしていますが、正しく動作していないようです。

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

'GiallaSoto'変数は常にtrueです。しかし、私はそれがfalseとして私が思う

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

がデータから正しい値を取得するプロパティにする方法と組み合わせる正しいsintax

Answer 1

使用オブジェクト構文に関連する何か、であると宣言しました。

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>