**为节约性能，我们将 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> ``` ## 不支持 Vue官方文档：Class 与 Style 绑定 中的 classObject 和 styleObject 语法。 此外还可以用 computed 方法生成 class 或者 style 字符串，插入到页面中，举例说明： ``` <template> <!-- 支持 --> <view class="container" :class="computedClassStr"></view> <view class="container" :class="{active: isActive}"></view> <!-- 不支持 --> <view class="container" :class="computedClassObject"></view> </template> ``` ### 动态菜单切换示例 ``` <template> <scroll-view class="menus"> <view v-for="(menu, index) in menus" :class="[index == currentIndex ? 'menuActive' : '']">{{menu}}</view> </scroll-view> </template> <script> export default { data: { currentIndex : 0, menus : [ '新闻', '汽车', '读书' ] }, onLoad:function(options){ console.log("onLoad"); }, onHide:function(){ console.log("onHide"); }, onShow:function(){ console.log("onShow"); } } </script> <style> .menus{width:700px; margin:0 auto; padding:20px 0px;} .menus view{padding:8px; line-height:20px; font:38px; float:left;} .menuActive{color:#900;} </style> ```