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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容