将`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`绑定