为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中，支持语法和转换效果如下：

class 支持的语法:

<view :class="{ active: isActive }">111</view>

<view v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>

<view :class="[activeClass, errorClass]">333</view>

<view v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>

<view 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 绑定 中的 classObject 和 styleObject 语法。

不支持示例

小白教程网www.2d5.net

<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="computedClassStr"></view>
    <view :class="{active: isActive}"></view>
 
    <!-- 不支持 -->
    <view :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 绑定

计算属性

完整支持 Vue官方文档小白教程网：计算属性。

条件渲染

完整支持 Vue官方文档小白教程网：条件渲染