动态样式与编译

<template>
  2     <view class="content f f-wrap">
  3 
  4         <image class="logo" src="../../static/image/myHover.png" @click="tap"></image>
  5 
  6         <!-- 
  7             前：样式
  8             后：控制:显示/隐藏
  9          -->
 10 
 11 
 12         <!-- 单类 -->
 13         <view :class="{ active: isActive }">111</view>
 14 
 15         <!-- 对象 -->
 16         <view class="static" :class="{ active: isActive, 'text-danger': hasError }">222</view>
 17 
 18         <!-- 数组 -->
 19         <view class="static" :class="[activeClass, errorClass]">333</view>
 20 
 21         <!-- 条件 -->
 22         <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
 23 
 24         <!-- 数组+对象 -->
 25         <view class="static" v-bind:class="[{ activeGrey: isActive }, errorClass]">555</view>
 26 
 27         <!-- 执行类 -->
 28         <view class="container" :class="computedClassStr"></view>
 29         <view class="container" :class="{activeGrey: isActive}">9999</view>
 30 
 31 
 32 
 33         <!-- style支持的类 -->
 34         <view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
 35         <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>
 36 
 37     </view>
 38 </template>