uni-app 三元运算样式绑定

uni-app 三元运算样式绑定

<template> 

<view class="content f f-wrap">

<image class="logo" src="../../static/image/myHover.png" @click="tap"></image> 

<!-- 7 前：样式 8 后：控制:显示/隐藏 9--> 

<!-- 单类 --> 

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

<!-- 对象 --> 

<view class="static" :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="[{ activeGrey: isActive }, errorClass]">555</view> 

<!-- 执行类 --> 

<view class="container" :class="computedClassStr"></view> 

<view class="container" :class="{activeGrey: isActive}">9999</view> 

<!-- style支持的类 --> 

<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view> 

<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view> 

</view>

</template>