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}]"。