博客


Vue

-多个

class

的三元表达式写法

不积跬步无以至千里~ 细节决定成败，加油💪🏻

方法一、数组形式 ⭐️

1、公式


:class="['固定类名',动态类名的三元表达式,...]"


2、注意点

1. 
class

   前面要加
   
   冒
   
   号；
2. 
   引号使用
   
   ：
   
外双里单

   /
   
外单里双

   （比如：外面用双引号，里面的就要用单引号）；
3. 数组里面以
   
   逗号
   
   分隔，固定类名要加
   
   引号
   
   。

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、注意点

1. 
class

   前面要加
   
   冒
   
   号；
2. 
   引号使用
   
   ：
   
外双里单

   /
   
外单里双

   （比如：外面用双引号，里面的就要用单引号）；
3. 动态类名的三元表达式要加
   
   小括号
   
   ，固定类名要加
   
   引号
   
   。

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>