**為節約性能，我們將 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> ```