vue :style :class多个三元表达式判断使用

原创 已于 2023-04-06 17:02:20 修改 · 2.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #前端 #css

于 2023-03-15 11:00:11 首次发布
这段代码用于根据item.status的状态值（在线、离线、报警或异常）动态设置CSS类，同时调整元素的marginTop属性以适应主消息显示状态的变化。

效果

:class

:class="item.status == 'online' ? 'online' : item.status == 'offline'?'offline':item.status == 'alarm'? 'alarm':'abnormal'"

:style

:style="{ marginTop: isPrimaryMsgShow == false ? '40px' : '0px' }"

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 与 Style 绑定
ChinaDragon10的博客
05-31 1204
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
vue里写三元判断绑定class和style
i_am_a_div的博客
07-31 1231
<a-select :disabled="(dataBaseId ? false : true)" style="width: 100%" showSearch placeholder="请输入选择表名" v-decorator="[
Vue行内、{{}}内的多条件，多重判断
qq_38305872的博客
04-19 2204
Vue行内、{{}}内的多条件，多重判断
vue中:class写多个三目判断用法
tentime的博客
01-22 3119
vue中:class中多个三目判断写法
vue 动态class类名 多个判断
weixin_50919759的博客
12-10 9621
vue 动态class 类名 多个判断 <a class="p-1 pl-2 pr-2 rounded-lg" data-toggle="dropdown" @click="show()" :class="{'redText':textStr == '待处理','blueText':textStr == '处理中','greenText':textStr == '已处理'}" > {{ textStr }} <img src="./assets/img-zxtj
Vue2（8） Class 和 Style 绑定学习笔记
反贪局
03-30 1257
当在一个自定义组件上使用 class 或 style 属性时，这些 class 或 style 将被添加到该组件的根元素上面。这个元素上已经存在的 class 或 style 不会被覆盖。示例：</如果isActive为true，则自定义组件的根元素将同时拥有bazboo和active这三个 class。Vue 2 提供了强大的 class 和 style 绑定功能，通过对象语法和数组语法，我们可以灵活地根据数据动态地切换 class 和样式。这种绑定方式不仅简化了代码，还提高了代码的可读性和可维护性。
vue :style 三元运算写法
最新发布
10-30
- 方式二：直接使用三元表达式字符串，如 `<div :style="flag ? &#39;font-size: 30px&#39; : &#39;font-size:10px&#39;"></div>`，直接在字符串里通过三元运算来选择不同的样式设置 [^3]。 - 方式三：还可以参考style三元表达式示例...
vue在:class书写三元表达式
09-02
在 Vue 中，你可以使用 `:class` 来书写三元表达式。下面是一个示例： ```html <div :class="isActive ? &#39;active&#39; : &#39;inactive&#39;">... ``` 上述代码中，`isActive` 是一个在 Vue 实例中定义的变量或计算属性，它的...
Vue :class 绑定可以结合多个判断维度来动态设置类
u010865136的专栏
08-19 927
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
vue 带有判断的动态style
x_nweBorder01k的博客
03-10 5047
:style="{'background-color': (navTopping == 1) ? dynamicTopBg: dynamicLeftBg}"
vue2动态绑定style，class，连续三元判断
ndkfa的博客
05-21 1251
【代码】vue2动态绑定style，class。
vue动态绑定多个class且是多个条件判断的问题
weixin_43962877的博客
04-10 965
【代码】vue动态绑定多个class且是多个条件判断的问题。
vue style样式动态绑定 根据for循环中的标识进行判断 展示不同的样式
Libertied的博客
04-17 3888
话不多说，贴代码，具体的可以去贴上去试试，主要其实不在js代码 而是在于style的动态样式绑定 <view class="segBgView"> <block v-for="(item,index) in segTitleArr" :key="index"> <view class="segItem" @cl...
在:class中添加多个三元
Evangelionnn_01的博客
04-21 493
在: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> 利用数组。 ...
vue中 根据判断条件添加一个或多个style，及class的写法
热门推荐
popstarqq的博客
01-14 2万+
style 写法： <i:style="{'color':isBling?'red':'white'}" @click=""></i> class写法 <i :class='[show ?"class1":"class2","iconfont"]' @click="toggleVisual"></i> class1与class2...
vue动态绑定class和style，三目运算符条件判定
qq_20236937的博客
06-30 2058
vue动态绑定class和style，三目运算符条件判定
vue 三元判断绑定class
Bloxed_shangyc的博客
09-19 2万+
v-bind:class="index==searchIndex ? 'typeselect' : ''"
Vue style、class 内联三元表达式
林中明月间丶
07-23 2万+
转自：http://yaohuitao.com/?p=379 转自：https://blog.youkuaiyun.com/qq_41619741/article/details/84284386 转自：https://blog.51cto.com/12883930/1923791 通常给class绑定个对象，就可以动态的切换样式了。(data中定义isActive的true、false) <...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值