Vue-多個class的三元表達式寫法

不積跬步無以至千里~ 細節決定成敗，加油💪🏻

方法一、數組形式 ??

1、公式

:class="['固定類名',動態類名的三元表達式,...]"

2、注意點

class前面要加冒號；

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

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

3、舉例

實現多個class中，里面有一個固定class：role和一個動態class：selectedRole（用三元表達式判斷是否顯示該類名）。

<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：【在固定類名和動態類名的三元表達式之間加個 空格字符串】
:class="'固定類名'+' '+(動態類名的三元表達式)"

公式2：【在動態類名的前面加個空格】
:class="'固定類名'+(動態類名的三元表達式)"

公式3：【在固定類名的后面加個空格】
:class="'固定類名 '+(動態類名的三元表達式)"

2、注意點

class前面要加冒號；

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

動態類名的三元表達式要加小括號，固定類名要加引號。

3、舉例

實現多個class中，里面有一個固定class：role和一個動態class：selectedRole（用三元表達式判斷是否顯示該類名）。

采用公式1、【在固定類名和動態類名的三元表達式之間加個 空格字符串' '】

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

采用公式2、【在動態類名selectedRole的前面加個空格】

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

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

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

總結

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

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