微信小程序动态绑定class样式类(三木运算)

这篇具有很好参考价值的文章主要介绍了微信小程序动态绑定class样式类(三木运算)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

直接上代码,循环列表,根据选中状态显示不同的样式,active就是你在wxss文件里面创建的类名

<view  class="{{item.select ? 'active':''}}" wx:for="{{itemList}}" wx:key="{{item.id}}">
   {{item.name}}
</view>      

在一个标签的class里添加{{}}模板语法,模板里面是一个三元判别式,其中表达式一般引用data中的属性,表达式返回true或者false,A,B是class名,按照三元判别式的逻辑引用A或B。

当然可以同时引用多个,如<view class="E F {{ 表达式?'A':'B' }} {{ 表达式?'C':'D' }}"></view>这行代码引用了类E,F,选择引用A或B,选择引用C或D
也可以把三元判别式最后的参数去掉,以达到某个样式的显示或隐藏,如<view class="{{ 表达式?'A':'' }}" ></view>文章来源地址https://www.toymoban.com/news/detail-655609.html


          

到了这里,关于微信小程序动态绑定class样式类(三木运算)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 给自定义组件或uview等ui组件加class样式或修改样式在微信小程序不生效的情况

    首先不论是自定义组件还是ui组件,本质上的原因都是微信小程序默认的组件隔离策略导致的。 微信小程序组件隔离文档参考 1.在原有class上修改样式 比如我在uview radio 单选组件的原有class(.u-radio ) ,修改样式出现不生效的情况 解决: 加上 ::v-deep 即可 2.增加class 比如我在

    2024年02月02日
    浏览(51)
  • 【微信小程序创作之路】- 小程序事件绑定、动态提示Toast、对话框 Modal

    第六章 小程序事件绑定、动态提示Toast、对话框 Modal 本章主要讲解小程序事件绑定、动态提示Toast、对话框 Modal,结合代码示例,我们来研究一下! 事件是 视图层到逻辑层的通讯方式 。事件是小程序和用户互动的主要方式,通过事件将用户在 视图层 的行为,反馈到 逻辑层

    2024年02月14日
    浏览(41)
  • 微信小程序实现动态添加class的功能,其实这样做就可以了

    在微信小程序中,实现一个循环列表某些元素动态添加class,以设置选中状态的功能 **思路:**网页中可能使用document.getElementById().addClass()实现,但是在小程序中无法使用document获取元素。小程序可以构造一个数据结构,根据业务需求动态修改数据去判断是否添加选中样式。具

    2024年02月11日
    浏览(31)
  • 解决微信小程序dom的获取问题,动态修改CSS样式

    哥们儿用UNIAPP开发微信小程序的过程中,遇到这么一个组件 这是插件市场中的一个案例,作者使用的进度条是vant的Circle 环形进度条 哥们儿开心的很呀,这东西粘贴一下改改数,一天的工作量不就达成了吗? 但是因为种种原因,我还是太高估自己了,vant引入不进去! 还好哥

    2024年02月05日
    浏览(37)
  • 微信小程序通过js动态修改css样式的方法,以及css变量

    不知道各位小帅有没有遇到这种问题,在微信小程序开发的时候,我们想要将某个文字大小变大,那么本篇文章就是解决这个问题。

    2024年02月06日
    浏览(42)
  • uniapp小程序手写tab导航栏切换(点击切换样式,动态样式绑定)

    最近写uniapp,ui里面有一个导航栏切换的逻辑,因为要跟UI保持一致,对于组件库很难实现高度定制,所以这里就自己手写实现一个点击切换的导航栏。先看下图效果: 主要实现的是通过点击切换导航栏,并且样式有一个切换的效果,大家可以根据自己的需求进行样式的DIY

    2024年02月12日
    浏览(40)
  • 【微信小程序】动态修改page的wxss样式/scroll-view使用/监听子组件

    静态写法 直接使用下面的写法,是静态的。 动态写法 在wxml最外层套一个自己定义的page的class。 如果想修改.page的样式,再用普通的动态class判断改变就可以了。 例如:改变背景颜色 参考:微信小程序如何动态修改page标签的css样式 设置id时需要注意下:id 的设置要求是字母

    2024年02月05日
    浏览(36)
  • 如何获取data中的值?如何取出,存储数据?跳转外部链接?与非本机联调?修改头部标题?动态更改样式?动态获取设备宽高?(微信小程序)

    工具:微信开发者工具 1.如何获取data中的值? 使用 this.data. 2.如何修改data中的值?使用 this.setData({key: value}),其中key为data中修改的数据,value为要修改的值 3.如何存储数据? 1.简单数据wx.setStorage({ key: ‘key’,data: value} 2.对象类数据wx.setStorage({ key: ‘key’,data: {}} 4.跳转外部

    2024年02月10日
    浏览(39)
  • Vue教程(五):样式绑定——class和style

    样式提前准备 绑定class样式——字符串写法 适用于: 样式的类名不确定,需要动态指定 html: js: 效果: 绑定class样式——数组写法 适用于: 要绑定的样式个数不确定,名字也不确定 html: js 效果: 绑定class样式——对象写法 适用于: 要绑定的样式个数确定,名字也确定,

    2024年02月12日
    浏览(26)
  • 视频讲解vue2基础之style样式class类名绑定

    目录  style样式的动态绑定 class类名动态绑定 一:官方给出的写法 二:自创三元表达式写法  详细的视频讲解:002vue_样式的动态绑定_哔哩哔哩_bilibili 003vue_样式动态绑定(小案例)_哔哩哔哩_bilibili 详细的视频讲解:002vue_样式的动态绑定_哔哩哔哩_bilibili 003vue_样式动态绑定

    2023年04月15日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包