vue class里同时使用多个三元运算

最新推荐文章于 2023-08-04 15:30:08 发布
最新推荐文章于 2023-08-04 15:30:08 发布
阅读量342 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61874639/article/details/131866542
版权

vue class里同时使用多个三元运算

vue绑定多个class 三元运算符 多个条件限制

在v-for循环中，根据需求，前3条添加不一样的样式。
第一个第二个第三个分别是不同的样式

<div
 v-for="(item, index) in msgList"
  :key="index"
  :class="[index==0?classA:'',index==1?classAa:'',index==2?classAb:'',index>2?classB:'']"
  :style="sideMsgStyle"
>

条件比较多的情况下利用数组

转自：https://blog.csdn.net/Emma1314PYT/article/details/109467481

小方是个战五渣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中 :style 与 :class 三元运算符使用
skysys的研究小屋
08-04 1万+
style三元表达式 <p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p> class三元表达式 <i class="iconfont " :class="[isShow=='password'?'icon-kejian':'icon-bukejian']"></i>
使用 Vue 绑定单个或多个 Class 名的实例代码
08-28
主要介绍了使用 Vue 绑定单个或多个 Class 名的实例代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧
Vue一个:class=““写多个三目运算（行内）uniApp中
真的是哪个男人！
12-17 2109
01.数组形式 <view class="_orderNav" :class="[_flog == true ? '执行的样式类名' : '其他样式类名', _flogRoom == 1 ? '执行的样式类名' : '其他样式类名']"> </view> // js <script> // 省略上代码结构....... data(){ return { _flog: true, _flogRoom: 1 } } // 省略下代码结构.....
uniApp一个:class=““写多个三目运算（行内）
slow097的博客
09-16 1146
01.数组形式 <view class="_orderNav" :class="[_flog == true ? '执行的样式类名' : '其他样式类名', _flogRoom == 1 ? '执行的样式类名' : '其他样式类名']"> </view> // js <script> // 省略上代码结构....... data(){ return { _flog: true, _flogRoom: 1 } } // 省略下代码结构...
2022-06-13 工作记录--Vue-多个class的三元表达式写法
weixin_48850734的博客
06-22 6958
Vue-多个class的三元表达式写法
:class里面使用三目运算符
肖肖肖丽珠的博客
01-13 3464
:class="[item.diffpercent==0?'grey':(item.diffpercent>0?'red':'green')]"
vue动态绑定多个class以及带上三元运算或其他条件
最新发布
一步一个脚印，踏实努力，向着目标前进
08-04 5607
动态绑定样式属性和类绑定是最常用的方法，它们提供了灵活和动态改变样式的能力。计算属性适用于需要根据多个属性的值来计算样式属性值的情况，可以使代码更加清晰和可维护。根据具体的需求和个人偏好，可以选择合适的方法来动态添加样式
class——三目运算符
qq_34108428的博客
08-22 1385
:class="['iconfont',absenteesNumShow===true?'iconyanjing_kai':'iconClose']"
vue 动态添加class,三个以上的条件做判断方式
01-22
如果 status为1，样式为redRoom 如果 status为2，样式为greenRoom1 ...补充知识：vue 根据变量值来判断显示class 我就废话不多说了，大家还是直接看代码吧~ <div :class=”[‘bottom-btn’,{‘face-btn’:type==’
详解vue2.0 transition 多个元素嵌套使用过渡
08-30
主要介绍了详解vue2.0 transition 多个元素嵌套使用过渡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中多个倒计时实现代码实例
10-17
主要介绍了vue中多个倒计时实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在:class中添加多个三元
Evangelionnn_01的博客
04-21 354
在:class中添加多个三元 <view v-for="(item,index) in satisfyIndex" :key="index" class="block" :class="[item.flag?'wordBox_blue':'',item.reason_name.length>8?'longBox':'wordBox']" @click="chooseIndex(item)">{{item.reason_name}}</view> 利用数组。 ...
三元运算符的使用
qq_43389202的博客
07-10 370
.三元运算符 ： 格式： 表达式 ? 表达式1 : 表达式2 注意： ① 表达式表示一个布尔类型的结果。 ② 通过该布尔类型的值，来进行 表达式1 和表达式2的二选一的执行操作。 public class 三元运算符 { public static void main(String[] args) { System.out.println(6 > 3 ? 1 : 2); boolean flag = false; System.out.println(flag ? "正确":"错误"); }
vue :style :class多个三元表达式判断使用
killerdoubie的博客
03-15 1934
vue :style :class多个三元表达式判断使用
vue 三元表达式
热门推荐
qq_24010663的专栏
12-17 1万+
1、数组形式 <div :class='["classify",current=="0" ? "active" : ""]' @click='current=0'> `课程 ` 注意：数组中的classify如果不加引号的话，代表的是data中的一项，并不是类名，将classify加上双引号，变成字符串就可以变成类名 2、字符串拼接 <div :class="'classify'...
三元运算符执行多个表达式
memoryI的博客
10-12 6721
let time,activeTime,isTime time === 1 ? (activeTime = -1) && (isTime = false) : activeTime = '' 或者 time === 1 ? (activeTime = -1, isTime = false) : activeTime = '' ...
vue3定义class类名有多个需要用三元运算怎么使用
05-14
在这个示例中，我们定义了两个变量 `isActive` 和 `isHighlighted`，并在绑定 class 时使用了三元运算符来判断是否要绑定对应的类名。如果 `isActive` 为 true，则会绑定 `active` 这个类名，否则绑定空字符串；如果...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值