<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>
网友评论