【微信小程序】通过三元表达式给view动态设置class

最新推荐文章于 2024-04-18 16:28:40 发布

原创最新推荐文章于 2024-04-18 16:28:40 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

21 篇文章

订阅专栏

这篇博客探讨了如何使用HTML和JavaScript实现已核销和未核销按钮的样式控制。通过`checked-color`和`uncheck-color`类，作者展示了如何动态改变按钮的视觉状态，以反映不同的业务流程阶段。

  <button class="check-button {{btnDesc == '已核销' ? 'checked-color' : 'uncheck-color'}}" catchtap="payClick"
      hidden="{{payBtnHidden}}">{{btnDesc}}</button>

其中checked-color是“已核销”的按钮样式，
uncheck-color是“核销”的按钮样式
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

川川~

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序 三元运算符点击循环列表中的某一项切换颜色进行参数携带（原创）

weixin_40291248的博客

05-07

3244

先上效果图整体思路大概是：wx:for循环出你的list 每个list有单独的id 点击事件bindtap用三元运算符判断id是否相等，然后js里u_current只要相等就增加一个active，参数携带都在e.currentTarget 里面 wxml代码 <scroll-view class="pup_bottom" ...

微信小程序单选框自定义赋值

10-15

微信小程序单选框自定义赋值涉及到前端开发中单选框组件的灵活运用，以及在微信小程序平台上的特定实现方法。本文将详细介绍在微信小程序中实现单选框自定义赋值的过程，并提供代码示例以及相关知识点。首先，我们...

参与评论您还未登录，请先登录后发表或查看评论

微信小程序中动态添加删除class类名使用三元表达式动态设置标签的class名

SupperPigger的博客

09-06

4585

在微信小程序中无法使用Jquery的addClass与removeClass来给标签增加与删除Class类，我们使用使用三元表达式来动态的为微信小程序中的标签增加&删除class名。

[码海拾贝之TC] 使用View 定义动态的Class

oscar999的专栏

12-22

2066

前言在TC 中，Persistent Class 和 Table 是对应的关系。定义一个Persistent的Class , updatedb 的时候就会产生对应的table.在TC 的开发环境中，使用一个username . 对应的会在这个username 下产生一个table在正式环境中，因为使用到 adm, su ,可key 三个username, 所以在这三个username 下都会生

微信小程序style的动态样式使用-三元表达式

手撕鸡翅的博客

05-30

5584

代码样例： <view class="cP-confirm" style="color:{{isListName?'#5478c7':'#bfbfbf'}}">确定</view> 注意“ ”和‘ ’的用法，如果只套用两个“ ”，则会报错，之前一直没找出是什么问题后来才发现是自己脑子短路了。 ...

微信小程序动态添加class样式

03-29

尺寸单位： rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。所以用rpx可解决适配问题样式导入： /** app.wxss **/ @import "common.wxss"; 内联样式：框架组件上支持使用 style、class 属性来控制组件的样式。 style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式

Vue : 动态绑定class

Mr. Ding的小博客

06-22

299

<view class="cu-item" v-for="(item,index) in list" @click="itemClick(item.url)"> <view class=" text-purple" :class="'cuIcon-'+item.icon_name"> </view> <text> {{item.text}}</text> </view> export default {

微信小程序 使用三元运算符动态渲染布局

衡与墨的博客

08-22

9655

今天在写微信小程序时，被坑到了， &amp;lt;!--.wxml-&amp;gt; &amp;lt;view class=&quot;row-in {{to_top ? 'to-top' : 'to-bottom'}}&quot;&amp;gt; ... &amp;lt;/view&amp;gt; 本意是想做一个简单的动态页面的，在用户点击按钮的时候，菜

微信小程序根据条件显示样式

05-05

在微信小程序开发中，根据条件显示样式是一种常见的需求，它涉及到动态控制页面元素的可见性、颜色、大小等属性，从而实现丰富的用户交互体验。本文将深入探讨如何在微信小程序中实现这一功能。首先，我们需要了解...

微信小程序三元表达式控制class，如何实现隐藏显示动态效果

最新发布

10-30

微信小程序中的三元表达式主要用于条件渲染，如果你想通过它来控制`class`属性的动态变化，从而达到元素显示或隐藏的动画效果，可以这样做： ```html <view class="{{isShow ? 'show animated' : 'hide'}}"> <!-- ...

微信小程序-页面开发

陆卿之的博客

01-02

4246

页面开发

微信小程序 动态绑定样式

PrimaryColor

08-05

3491

使用三目运算符，左边的表达式成立，执行一个样式，否则另一个样式。 <view> <view class="{{active===0?'a':''}}">分类</view> <view class="{{active===1?'a':''}}">排行</view> </view>

微信小程序开发三（动态绑定、三元运算、if判断和for循环）

weixin_41670405的博客

04-18

880

不想使用默认的名称如何处理？wx:for-index：设置下标名称。wx:for-item：设置接收名称。声明一个变量：js文件。index：默认的下标名称。动态绑定：wxml文件。声明一个变量：js文件。item：默认的接收名称。msg:"标签内容"

view标签里面的内容使用三元表达式条件渲染结果出错

m0_56542366的博客

10-20

469

view标签里面的内容使用三元表达式条件渲染结果出错

微信小程序开发教程：三元运算符动态添加类属性，根据用户的选择改变CSS样式

qq_25501981的博客

12-02

1840

若要在显示"▲收起内容▲"时修改底色，可以通过动态添加一个CSS类来控制样式。以下是一个示例代码，展示了如何在WXML中使用条件渲染来动态添加类，并在WXSS中定义这个类的样式。的值发生变化时，视图的底色也会相应地发生变化。这样，当点击事件触发，确保在你的WXSS文件中定义了。元素上，从而改变其底色。

class动态多条件绑定（微信小程序和vue的区别）

u014722196的博客

04-01

2308

class动态多条件绑定（微信小程序和vue的区别） #小白今天由于项目需要，第一次要用到小程序class动态多条件设置，于是安照vue的来，结果死活不出来，百度了好久才发现区别 #比较 微信小程序单条件 class=“{{ index2 ? ‘active’:’ ’ }}” 微信小程序多条件 class="{{ index1 ? ‘active’:’ ’ }} {...

微信小程序中动态添加删除类名

ag456的博客

05-13

633

如图，可以使用三元表达式来做一个判断，同时在点击事件中来动态的改变我们的status的值，以达到需要的效果。本来是想通过js来查询dom，然后添加删除类名，但多番查找发现，小程序好像不支持我们来操作dom元素，所以建议采用这种方式来改写。如果有更好的方式，欢迎大佬在评论区指点。 ...

原生微信小程序使用class 三元运算符实现多选案例

肖帅的博客

08-12

2058

原生微信小程序使用class 三元运算符实现多选案例如下图所示： 1，在vue中开发非常容易实现，使用数组的includes方法判断即可，但是在原生小程序中不可以 2，要及时的对定义的遍历进行setData，重新赋值本案例的重点js代码如下： // res是从接口返回的数据 let xueliArr = res.data.data.xueli.list if(xueliArr && xueliArr.length > 0){ xueliArr.forEach

2021-12-11 工作记录--Wechat applet-class（类名）的三元表达式

weixin_48850734的博客

12-11

370

class（类名）的三元表达式 1、实现效果：当currentSortIndex等于index时，加上类名selectedSort 2、实现代码： <view class="wx:if='{{currentSortIndex == index ? 'selectedSort' : ''}}' " wx:for="{{selections}}" wx:key="index" data-index="{{index}}" catchtap="selectSort">{{item}}</vi