在微信小程序开发时，需要动态绑定class来设置样式，微信小程序提供了比较便捷的语法，使我们能够快速地动态绑定class
用法：<view class="{{ 表达式?'A':'B' }}" ></view>
在一个标签的class里添加{{}}模板语法，模板里面是一个三元判别式，其中表达式一般引用data中的属性，表达式返回true或者false，A，B是class名，按照三元判别式的逻辑引用A或B。
PS：
当然可以同时引用多个，如
<view class="E F {{ 表达式?'A':'B' }} {{ 表达式?'C':'D' }}"></view>这行代码引用了类E，F，选择引用A或B，选择引用C或D也可以把三元判别式最后的参数去掉，以达到某个样式的显示或隐藏，如
<view class="{{ 表达式?'A':'' }}" ></view>
一个简单的例子：
index.wxml
border类给按钮添加了蓝色边框，根据data中的属性isRed，选择按钮的背景色
<!--index.wxml-->
<view class="container">
<view>微信小程序动态绑定样式测试</view>
<!-- border类给按钮添加了蓝色边框，根据data中的属性isRed，选择按钮的背景色 -->
<button class="border {{ isRed?'red':'green' }}">按钮</button>
</view>
index.js
isRed属性设置成true
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
isRed: true
},
})
index.wxss
/**index.wxss**/
.border {
border: 10rpx solid blue;
margin-top: 50rpx;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
最终效果
