代码片段:
<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}]"。