2022-06-13 工作记录--Vue-多个class的三元表达式写法

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>