uni-app Class 与 Style 绑定 （动态菜单激活示例）

为节约性能，我们将 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>