vue 動態設置class失效

項目中點選選中效果，需要動態切換class顯示效果。

 

 起初的想法是給數組添加flag為false 點擊那個把其他flag設為true。

但是data數據改了，頁面沒有刷新。

dom中

<view
            v-for="(item, index) in ruleList"
            :key="index"
            @tap="bindtapMoney(index)"
            :class="ruleIndex === index ? 'active-item active' : 'active-item'"
            >{{ item.amount }}
            <view :class="ruleIndex === index ? 'gift gift-active' : 'gift'">
              <text>贈{{ item.voucher }}</text>
            </view>
</view>

js中

data(){
　　return(
　　　　

　　　　ruleIndex: -1,

　　}　　　　　　
}
bindtapMoney(index) {
      this.ruleIndex = index;
},

這樣就可以了。