vue 動態更改classname

代碼片段：

<div class="tabBodyBtn1" v-for="(item,i) in btnGroupDate" :key="i" :class="['tabBtn'+i,{tabBodyBtn3:isClickBtn===i,tabBodyBtn2:isClickBtn!==i}]" @click="changeState(item.index,i)">

data里面：

btnGroupDate:[
          {name:"打開窗簾",index:1,imgurl:"https://img.alicdn.com/_!!2504088756.png"},
          {name:"暫停窗簾",index:2,imgurl:"https://img.alicdn.com/_!!2504088756.png"},
          {name:"關閉窗簾",index:0,imgurl:"https://img.alicdn.com/_!!2504088756.png"}
        ],

 

這是我渲染一排按鈕的div，上面打算加三個class，一個是固定樣式，其中一個需要動態更改，比如tabBtn1、tabBtn2、tabBtn3，還有一個是附加判斷條件的，

固定樣式直接用class="btn1  button33  xx"這樣加就可以中間加空格，動態更改和判斷條件的加在一起的寫法如上代碼:class="['btnClass'+index,{'btnClass2':true,'btnClass3':false}]"。