Vue-多個(gè)class的三元表達(dá)式寫法

不積跬步無以至千里~ 細(xì)節(jié)決定成敗，加油💪🏻

方法一、數(shù)組形式 ??

1、公式

:class="['固定類名',動(dòng)態(tài)類名的三元表達(dá)式,...]"

2、注意點(diǎn)

class前面要加冒號；

引號使用：外雙里單 / 外單里雙（比如：外面用雙引號，里面的就要用單引號）；

數(shù)組里面以逗號分隔，固定類名要加引號。

3、舉例

實(shí)現(xiàn)多個(gè)class中，里面有一個(gè)固定class：role和一個(gè)動(dòng)態(tài)class：selectedRole（用三元表達(dá)式判斷是否顯示該類名）。

<div :class="['role',currentRoleIndex == index?'selectedRole':'']" @click="switchRole(index)" v-for="(role,index) in roles" :key="index">{{role.name}}<span>{{role.value}}</span></div>

方法二、字符串形式 ??

1、公式

公式1：【在固定類名和動(dòng)態(tài)類名的三元表達(dá)式之間加個(gè) 空格字符串】
:class="'固定類名'+' '+(動(dòng)態(tài)類名的三元表達(dá)式)"

公式2：【在動(dòng)態(tài)類名的前面加個(gè)空格】
:class="'固定類名'+(動(dòng)態(tài)類名的三元表達(dá)式)"

公式3：【在固定類名的后面加個(gè)空格】
:class="'固定類名 '+(動(dòng)態(tài)類名的三元表達(dá)式)"

2、注意點(diǎn)

class前面要加冒號；

引號使用：外雙里單 / 外單里雙（比如：外面用雙引號，里面的就要用單引號）；

動(dòng)態(tài)類名的三元表達(dá)式要加小括號，固定類名要加引號。

3、舉例

實(shí)現(xiàn)多個(gè)class中，里面有一個(gè)固定class：role和一個(gè)動(dòng)態(tài)class：selectedRole（用三元表達(dá)式判斷是否顯示該類名）。

采用公式1、【在固定類名和動(dòng)態(tài)類名的三元表達(dá)式之間加個(gè) 空格字符串' '】

<div :class="'role'+ ' ' + (currentRoleIndex == index?'selectedRole':'')"></div>

采用公式2、【在動(dòng)態(tài)類名selectedRole的前面加個(gè)空格】

<div :class="'role'+ (currentRoleIndex == index?' selectedRole':'')"></div>

采用公式3、【在固定類名role的后面加個(gè)空格】

<div :class="'role '+ (currentRoleIndex == index?'selectedRole':'')"></div>

總結(jié)

以上是生活随笔為你收集整理的2022-06-13 工作记录--Vue-多个class的三元表达式写法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。