动态绑定样式，uniapp，用三元运算动态绑定多个class类样式，动态绑定的样式可以和原始样式共存

已于 2024-02-23 10:31:59 修改
阅读量1.2k 收藏 3
点赞数 7
文章标签： uni-app 前端
于 2024-02-23 10:04:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Frank_colo/article/details/136248587
版权

介绍 | uni-app官网

vue、uniapp中动态添加绑定style、class 9种方法实现_vue style动态绑定-CSDN博客

uniapp使用三元运算符动态绑定元素的style样式_uniapp style动态绑定-CSDN博客

 对象写法,可以写多个class类

class类的名字：判断条件，最后结果只有真和假

:class="{ 'scroll-view-fill': activeIndex === 2 || activeIndex === 3 ? true : false }"

 字符串写法，只能写一个class类

:class="'scroll-view-fill': activeIndex === 2 ? true : false"

有的tab页面有灰色块，有的页面没有灰色块。根据选择的tab不同，页面会出现灰色块，想通过判断点击的是哪个tab,来改变页面的scroll-view这个class类的样式，从而把这个灰色的块去掉

写了2个class类，点击基本信息页面时，scroll-view样式起作用，点改造验收页面时，scroll-view-fill样式起作用

 点击改造验收，没有灰色块了

烟火的降落
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue三元式进行样式绑定
qq_42352516的博客
05-24 353
Vue 三元式进行样式绑定 <template slot-scope="scope"> <el-tag :type="(scope.row.audit == 'pass' ? '' : (scope.row.audit == 'auudit' ? 'success' : (scope.row.audit == 'reject' ? 'danger' : 'warning')))" disabled-transitions> {{scope.row.audit}} &l
Angular动态绑定样式及改变UI框架样式的方法小结
10-18
在Angular开发中，动态绑定样式和改变UI框架样式是提高应用可定制性和用户体验的重要手段。本文将详述如何在Angular中实现这两点。 首先，让我们深入理解Angular动态绑定样式。AngularJS提供了一种强大的机制，允许...
uni-app 三目运算改变class 设置不同的样式
samHuangLiang的博客
07-31 2182
<view :class="[disabledCode==true?'code_text_tap':'code_text']" @tap="onSendCode" :disabled="disabledCode">{{codeText}}</view> :class="[disabledCode==true?'code_text_tap':'code_text']"
在 uni-app 中，可以通过几种不同的方式来动态地绑定 CSS 样式?
最新发布
baifangfang521的博客
05-27 614
在 uni-app 中，你可以通过几种不同的方式来动态地绑定 CSS 样式。这通常涉及到使用 JavaScript 来计算或改变样式，并将这些样式应用到组件上。
【uniapp / vue】中动态添加绑定style 或 class
Brod-Roy的博客
04-15 2167
用于根据值不同需要修改的参数过多的时候。用于根据值不同需要修改的参数过多的时候。
uniapp（vue）中动态添加绑定class
weixin_42017221的博客
11-03 1583
【代码】uniapp（vue）中动态添加绑定class。
vue3 根据多个参数利用三元表达式不同设置多个样式
Bannerparter的博客
10-16 2064
众所周知，三元表达式用来根据参数的不同执行不同的代码是很方便的，那么如果参数类型有许多种，那么怎么利用三元表达式来进行控制呢？
uniapp在:style动态设置样式
FUFCY的博客
04-22 3257
:style="{backgroundColor:`${query.label.color}`}"
uniapp动态修改样式，使用style动态修改样式，避坑
我乃世间蓬蒿人
08-17 4417
这里我是写微信小程序，按照uniapp写法应该用upx，但是这里写upx无效，所以应该是根据平台使用对应的像素单位。微信小程序用的rpx，用px也能生效。不知道为什么无效，upx换车px，rpx也无效。所以打算根据计算数据条数修改图表高度。有更好解决办法的希望能留言互相学习。使用echarts做柱状图套嵌在。中，将xy轴颠倒后，不会自动撑大。经过查询后找到以对象的方式放入。下面找到一种，将对象直接写到。...
uni-app中class与style绑定三元表达式写法
ajdhakj6的博客
12-31 757
uni-app中class与style绑定三元表达式写法
uniapp中使用三元运算符的写法
m0_50669730的博客
07-26 613
三元运算符，用于计算布尔表达式，并根据布尔表达式的计算结果为true还是false来返回;
微信小程序 动态绑定事件并实现事件修改样式
08-30
同时，`class`属性使用了条件判断来动态设置样式类，根据`currentId`是否与`item.id`相等，决定应用`clickSel`（红色文本）还是`removeSel`（黑色文本）。 接下来，我们看JS部分。`reportTypeList`是一个包含多个...
Vue.js样式动态绑定实现小结
10-17
主要介绍了Vue.js样式动态绑定实现小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue 框架之动态绑定 css 样式实例分析
12-10
静态绑定的话，直接加 class=“”就可以了，使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ，也可以实现绑定，但都不是动态绑定，动态绑定肯定是根据用户的某个操作实现动态的修改样式 先看下面的...
【uniapp】 class表达式
sayyy的专栏
08-10 2033
前言 Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替） 官方提供的语法 <view :class="{ active: isActive }">111</view> <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view> <view class="static" :clas
vue、uniapp中动态添加绑定style、class 9种方法实现
一步一个脚印，踏实努力，向着目标前进
08-31 8570
使用场景：当class和style属性是固定不变的时候，可以直接在模板中写死。优点：简单直接，没有额外的计算和逻辑。缺点：无法根据条件动态修改class和style。使用场景：当class和style属性需要根据组件的data或props属性动态变化时，可以使用v-bind来动态绑定。优点：可以根据条件动态修改class和style。缺点：需要在模板中写表达式，有一定的复杂度。使用场景：当class和style属性的计算逻辑比较复杂时，可以使用计算属性来生成class和style对象。
uniapp vue 小程序动态style和class的用法
qq_45716607的博客
12-12 2311
https://blog.csdn.net/Shids_/article/details/117531088 vue 1.1 绑定单个class <div :class="{'active':isActive}"></div> data() { return { isActive: true }; } 渲染结果 <div class="active"></div> 1.2 绑定多个class <div class="
vue动态绑定多个class以及带上三元运算或其他条件
一步一个脚印，踏实努力，向着目标前进
08-04 6887
动态绑定样式属性和类绑定是最常用的方法，它们提供了灵活和动态改变样式的能力。计算属性适用于需要根据多个属性的值来计算样式属性值的情况，可以使代码更加清晰和可维护。根据具体的需求和个人偏好，可以选择合适的方法来动态添加样式
uniapp 动态绑定class添加样式穿透
06-07
在Uniapp中，动态绑定class可以通过以下方式实现： 1. 将class定义为一个变量，然后在模板中使用{{}}绑定变量，如下所示： ``` <template> <div class="{{className}}">Hello World</div> </template> <script> export default { data() { return { className: 'my-class' } } } </script> ``` 2. 在模板中使用三元表达式，根据条件动态绑定class，如下所示： ``` <template> <div :class="isRed ? 'red' : 'blue'">Hello World</div> </template> <script> export default { data() { return { isRed: true } } } </script> ``` 至于样式穿透，可以使用>>>或者/deep/选择器来实现。例如： ``` <template> <div class="parent"> <div class="child">Hello World</div> </div> </template> <style scoped> .parent >>> .child { color: red; } </style> ``` 或者： ``` <template> <div class="parent"> <div class="child">Hello World</div> </div> </template> <style scoped> .parent /deep/ .child { color: red; } </style> ``` 这样就可以将样式穿透到子组件中。需要注意的是，/deep/选择器在Sass/Less中可能会失效，建议使用>>>选择器。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值