如何动态绑定多个class

颓废小岩

<view v-for="(age,index) in list">
       <text :class="['list-age',{'list-red':index == 0,'list-blue':index==1}]">{age.age}</text>
</view>
我想动态绑定class，按照vue的语法这么写不生效，我应该怎么写

杨永安

avm绑定数据的两种风格：

1.使用冒号绑定，后面接双引号，引号内接表达式（exp）
:class="exp"

2.使用花括号的形式，属性名不需要加冒号
class={exp}

exp就是表达式，可以使用JS语法来写，结合data的数据，一般绑定多个可以使用三元表达式。
例如
<text :class="`list-age ${(index===0?'list-red':'list-blue')}`">text</text>

或者
<text class={`list-age ${(index===0?'list-red':'list-blue')}`}>text</text>


上面是使用模板字符串让表达式更易读，使用 ES5 的字符串拼接也可以：

<text :class=" 'list-age ' + (index === 0 ? 'list-red' : 'list-blue') ">text</text>

chengshengbao

好牛逼,困扰我好久的绑定,可算搞好了,万分感谢