微信小程序动态绑定class

很多小伙伴微信小程序都不会动态绑定 class ,然而在平常的开发中，这是用的非常非常多的

比方说，我想要实现这样一个效果

点击下面不同的金额按钮，被点击的按钮就添加一个 active 样式

语法就是

class="{{ 表达式?'A':'B' }}"

现成的例子：

<block wx:for="{{arr}}">
    <view class="item {{index == currentIndex ? 'active' :''}}" data-index='{{index}}' data-val='{{item.key}}' bindtap='getVal'>
        {{ index }}元
</block>

.active{
    ...
}

如果添加多个的话就是

class="class1  {{ 表达式?'class2':'class3' }} {{ 表达式?'class4':'class5' }}"

需要注意的是最外面 class=" 这儿的引号和 {{}} 里面的引号要错开，外面是双引号，里面就是单引号，外面如果是单引号，那么里面就是双引号

动态绑定 style 也差不多 style="属性名:{{表达式?'值':'值'}}"

<block wx:for="{{arr}}">
<view data-index='{{index}}' data-val='{{item.key}}' bindtap='getVal' style="text-align:{{currentVal==item.key?'right':'left'}}">
    {{index}}元
</view>
</block>

同理，绑定多个也是差不多的

 style="text-align:{{currentIndex==index?'right':'left'}};font-size:{{currentIndex==index?'22rpx':'44rpx'}}"

还有一种就是在 js 文件里面定义变量，然后三目运算的时候直接使用变量就行

data:{
  colorR:"red",
  colorB:"blue"
}

style="background:{{表达式?colorR:colorB}}