2022-06-13 工作记录--Vue-多个class的三元表达式写法
Vue-多个class的三元表达式写法
·
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>
更多推荐
已为社区贡献7条内容
所有评论(0)