记录：vue用三目运算符判断不同样式

已于 2022-01-26 10:54:53 修改
阅读量946 收藏 1
点赞数
文章标签： vue.js 前端 javascript
于 2022-01-17 13:52:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44639993/article/details/122536323
版权

在class上变换

<view :class="tabIndex==TypeIndex ? 'uni-tab-item-title-active' : 'uni-tab-item-title'">{{TypeItem.name}}</view>

在style变换

  <view :style=" 'color: ' + (tabIndex == '1' ? '#FFFFFF' : '#000000') ">{{TypeItem.name}}</view>
打代码的盲狙熊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中通过属性绑定为元素绑定style行内样式的实例代码
11-21
1.直接在元素上通过:style的形式，书写样式对象 这是一个H1 2.将样式对象定义在data中，并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中，通过属性绑定的形式，将样式对象应用到元素中 这是一个H1 3.在:style中通过数组，引用多个data上的样式对象 1:
vue中el-table每一行根据某个属性，做判断，定义改行的样式
有问题可关注公众号：前端研究院 后台输入问题回复
03-15 1932
给el-table添加 :row-class-name="tableRowClassName" 方法： tableRowClassName( { row, rowIndex }){ if (row.isDelay == "Y") { return 'success-row'; .
vue二种方式根据条件判断显示不同样式
songjuntao8的专栏
08-04 1万+
1.v-if-v-else/v-show的方式，只显示其中之一 #v-if v-else <div class="blue" v-if="item.num == '0'">{{ item.num }}</div> <div class="orange" v-else>{{ item.num }}</div> #v-show <div class="blue" v-show="item.num == '0'">{{ item.num }}&.
vue 行内多重判断，状态使用枚举
leng0920的博客
11-14 1938
vue 行内多重判断，状态使用枚举
Vue 中使用三目运算符 判断标签的选中状态 改变class样式
m0_64547949的博客
02-21 2554
Vue 中使用三目运算符 判断标签的选中状态 改变class样式
在vue中v-bind使用三目运算符绑定class的实例
10-17
具体到Vue中的使用，结合v-bind:class和三目运算符的例子可能是这样的： ```html <div :class="isOk ? 'classA' : 'classB'">内容 ``` 在这里，`:class`是v-bind:class的简写形式。`isOk`是一个布尔值，可能是根据...
VUE style 行内样式三目运算符动态判断
最新发布
08-01
VUE.js 中，行内样式可以使用三目运算符 (?:) 动态地根据条件设置元素的 CSS 属性值。这种写法简洁明了，主要用于当需要根据某个变量或表达式的真假来改变元素样式的场景。 例如，假设有一个 `isHidden` 的布尔变量...
vue 三目运算符.
07-28
Vue中的三目运算符与普通的 JavaScript 三目运算符相同，可以用于条件判断和返回不同的值。在Vue模板中，可以使用v-bind指令配合三目运算符来动态绑定属性或样式。下面是一个示例： ```html <div v-bind:class="is...
vue 中 动态样式:class加三目怎么使用
07-28
在 Vue 中使用动态样式可以通过 `:class` 绑定加上三目运算符来实现。下面是一个示例： ```html <button :class="isActive ? 'follow-button active' : 'follow-button'"> {{ isActive ? '已关注' : '关注' }}...
vue style三目运算动态绑定样式
09-12
在Vue中，可以使用三目运算符动态绑定样式。通过在组件的style属性中使用三目运算符，可以根据条件动态改变样式。 下面是一个例子： ``` <div :style="{ color: isActive ? 'red' : 'blue' }"> ``` 在上面的例子中...
react通过state的数据显示style多个样式（三目运算）
chensong8331的博客
11-06 5739
style={this.state.show?{background:"#e5effd",border:"1px solid #99C7F4"}:null} react的普遍写法一个{}代表里面是一个可执行的代码块，className只有一个{}，而style之所以有两个{},是因为react里的style需要是一个对象，所以就多出了一个{}来包住样式属性，使其成为一个对象，所以当要实现多个行内...
vue中书写行内的样式
最爱喝怡宝的博客
11-10 1万+
<div id="app"> <!-- <h1 style="color: plum; font-size: 10px;">我是一个成熟的h1</h1> --> <!-- 第一种方法 --> <h1 :style="{color:'red',fontSize:'10px'}">我是一个成熟的h1</h1> <!-- 第二种方法 --> ..
vue动态绑定class和style，三目运算符条件判定
TurtleOrange的博客
08-31 9158
三目运算符vue语法 #标签内容 {{button？ ‘取消’ ：‘确定’}} 【例子】 <el-button class="button" type="primary" @tap="handleClick">{{button? '取 消' : '确 定'}} </el-button> #类名 ：class = “[className ? ‘xx’ : ‘xx’]” 【例子】 <input :class="[className ? 'class1'
Vue 样式切换及三元判断样式关联
xuerwang的博客
11-14 8186
假设有需求： 后台返回状态1:启用，0：禁用 1、若要使启用为绿色，禁用不添加其他样式 &lt;el-table-column prop="statusName" align="center" label="状态"&gt; &lt;template slot-scope="scope"&gt;
vue方法里面怎么写三目运算符_vue中v-bind使用三目运算符绑定class
weixin_39623271的博客
12-18 1261
{{delay}}{{ projectName | ellipsis }}{{ gradeName }}data () {return {delay: '延期', // 延期状态显示的字段outline: 'outline', // 非延期状态的外边框样式outlineDelay: 'outlineDelay' // 延期状态的外边框样式}},/* 外边框样式 */.outline {width:...
vue方法里面怎么写三目运算符_Vue中涉及到的三目运算与v-if结合
weixin_39729262的博客
12-18 3762
一.问题11.需求：最近在用Vue写后台，其中有个需求被广泛使用：点击签收，立即变成 节点办理|办结2.解决办法：思路;在 节点办理|办结 两个button按钮上绑定v-if的三目运算，当点击签收，签收状态改变，刷新页面，v-if的条件执行，显示节点办理|办结使用的是elementUI的table组件，根据组件的api,点击签收按钮，传递当前这行的数据，能够得到签收状态的值，在...
vue中的导航栏动态添加class（三目运算符）
热门推荐
坤音女孩的博客
11-02 1万+
1.三目运算符，:class=&amp;amp;amp;amp;quot; isActive==‘aaa’ ? ‘isActive’ : ‘’ &amp;amp;amp;amp;quot;，@click=“toggle(‘aaa’)”。判断isActive是否等于aaa，等于 -&amp;amp;amp;amp;amp;gt; class=“isActive”，不等 -&amp;amp;amp;amp;amp;gt; class=’ '，点击的时候带上实际的参数 2.scr
三目运算符判断三个条件
weixin_34006965的博客
04-08 1万+
{{list.status==0 ?"等待付款":(list.status =="1"?"已支付":"已取消")}} 转载于:https://www.cnblogs.com/Tohold/p/8743719.html
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值