前言

• Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）

官方提供的語法

<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>

特別說明的三段表達式

<view class="item" :class="[itemIndex>0?'itemBorder':'']" v-for="(item, itemIndex) in favoriteList" :key="itemIndex"><view class="title">{{item.title}}</view><view class="time">收藏于 {{item.time}}</view> </view>

也可以寫成：

<view :class="['item',itemIndex>0?'itemBorder':'']" v-for="(item, itemIndex) in favoriteList" :key="itemIndex"><view class="title">{{item.title}}</view><view class="time">收藏于 {{item.time}}</view> </view>

說明：

• 重點是中括號[]

隔行變色

效果：奇數行，紅色；偶數行，原色。

<view :class="['item',itemIndex%2==1?'itemRed':'']" v-for="(item, itemIndex) in favoriteList" :key="itemIndex"><view class="title">{{item.title}}</view><view class="time">收藏于 {{item.time}}</view> </view>

參考

https://uniapp.dcloud.io/use?id=class-%e4%b8%8e-style-%e7%bb%91%e5%ae%9a
https://cn.vuejs.org/v2/guide/class-and-style.html

總結

以上是生活随笔為你收集整理的【uniapp】 class表达式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。