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

小呀小萝卜儿

已于 2022-06-22 18:05:37 修改

阅读量7.6k

点赞数 14

分类专栏：工作-vue 文章标签：前端 vue

于 2022-06-22 11:47:37 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48850734/article/details/125398007

版权

工作-vue 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了在 Vue 中如何使用三元表达式来动态地为元素设置多个 class。方法包括数组形式和字符串形式，强调了在 class 属性前需加冒号，以及内外引号的使用规则。通过实例展示了如何根据条件判断是否添加 'selectedRole' 类到 'role' 固定类名上，帮助开发者更好地理解和应用 Vue 的动态 class 特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在这里插入图片描述