將`Class`與`Style`的表達式通過`compiler`硬編碼到`uni-app`中，支持語法和轉換效果如下： class 支持的語法: ~~~ <view :class="{ active: isActive }">111</view> <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view> <view class="static" :class="[activeClass, errorClass]">333</view> <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view> <view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view> ~~~ style 支持的語法: ~~~ <view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view> <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view> ~~~ 非H5端不支持[Vue官方文檔：Class 與 Style 綁定](https://cn.vuejs.org/v2/guide/class-and-style.html)中的`classObject`和`styleObject`語法。 不支持示例： ~~~ <template> <view :class="[activeClass]" :style="[baseStyles,overridingStyles]"></view> </template> <script> export default { data() { return { activeClass: { 'active': true, 'text-danger': false }, baseStyles: { color: 'green', fontSize: '30px' }, overridingStyles: { 'font-weight': 'bold' } } } } </script> ~~~ **注意：以`:style=""`這樣的方式設置px像素值，其值為實際像素，不會被編譯器轉換。** 此外還可以用`computed`方法生成`class`或者`style`字符串，插入到頁面中，舉例說明： ~~~ <template> <!-- 支持 --> <view class="container" :class="computedClassStr"></view> <view class="container" :class="{active: isActive}"></view> <!-- 不支持 --> <view class="container" :class="computedClassObject"></view> </template> <script> export default { data () { return { isActive: true } }, computed: { computedClassStr () { return this.isActive ? 'active' : '' }, computedClassObject () { return { active: this.isActive } } } } </script> ~~~ **用在組件上** 非H5端暫不支持在自定義組件上使用`Class`與`Style`綁定