首页 > 编程语言 >微信小程序动态绑定class样式类(三木运算)

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

时间:2023-08-18 17:01:44浏览次数:55  
标签:样式 微信 三木 引用 判别式 三元 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>


          

标签:样式,微信,三木,引用,判别式,三元,class
From: https://www.cnblogs.com/huwenlong/p/17641015.html

相关文章

  • 微信开发之一键删除好友的技术实现
    简要描述:删除联系人请求URL:http://域名地址/delContact请求方式:POST请求头Headers:Content-Type:application/jsonAuthorization:login接口返回参数:参数名必选类型说明wId是String微信实列IDwcId是String需删除的微信id返回数据:参数名类型说明codestring1000成功,1001失败msgstring反馈......
  • 结构体Struct、联合体Union与类Class
    结构体Struct、联合体Union与类Class1.Struct/Classstruct能包含成员函数吗?能!struct能继承吗?能!!struct能实现多态吗?能!!!1.1最本质的区别是默认的访问控制;结构体的继承是public的,class的继承是private的;两者也可以交叉继承,继承权限由子类决定,如结构体B继承类A,则为public继......
  • 微信公众号开发获取openid和用户信息的步骤
    <?phpdefine("APPID",'wxe147d9e245s9e343');define("APP_SECRET",'eb5ba07fee64we7uc5f0533cd11a6732');header("Content-type:text/html;charset=utf-8");session_start();if(!isset($_GET['code&#......
  • 使用GEWE框架完成微信机器人的开发 (登录模块)
    友情链接 geweapi.com点击即可访问  创建新设备简要描述:微信首次登录时需要先调用本接口创建设备,后续再次登录则直接使用之前创建的设备ID调用获取登录二维码接口登录即可。同一个号避免频繁创建新设备登陆,容易触发风控请求URL:http://域名地址/api/login/createapp请求方式:POS......
  • (全英语版)处理恶意软件的随机森林分类器算法(Random Forest Classifier On Malware)
    RandomForestClassifierOnMalware(copyright2020byYISHA,ifyouwanttore-postthis,pleasesendmeanemail:[email protected])(全英语版)处理恶意软件的随机森林分类器算法(RandomForestClassifierOnMalware)Overview随机森林分类器是最近很流行的一种识别恶意......
  • 微信小程序:环形进度条模块
    利用canvas实现微信小程序环形进度条模块。模块下载链接:下载链接最近开发一款背单词的微信小程序,计划使用环形进度条展示每日背单词进度。效果图如下(可渐变颜色):开发步骤1、在根目录创建名为components的文件夹,用来放需要引用的自定义组件。2、创建名为circle的文件夹,用来放......
  • 微信小程序:横向滚动卡片列表模板
    1前言在开发微信小程序时,横向可滚动卡片列表是一个必不可缺的页面组件。其不仅美观还可以节省屏幕空间。具体截图如下:2代码详解主要用的是scroll-x,具体代码如下:wxml<scroll-viewscroll-xclass="scroll-x"><viewstyle="display:inline-block;"class="act"bindtap=......
  • 微信小程序:伪装页面达到定时改变页面内容的目标
    Step1:在app.js中,导入util包用于获取时间varutil=require('/utils/util.js')Step2:在app.js中,将onLaunch函数加入以下内容:onLaunch:function(){vartime='2022/05/2213:00:00'//这个时间是预计审核通过后的时间vart=util.formatTime(newDate());thi......
  • 微信小程序:自动生成打卡海报
    完整项目下载:下载链接1前言在当前的背单词小程序开发中,为满足用户学习完成后的展示需求,计划引入自动生成打卡海报功能,以提升用户参与度与推广效果。除了基本的海报生成功能,还可以考虑以下丰富内容:将用户的学习数据融入海报,展示用户的学习时长、单词掌握率等统计信息,让用户......
  • 微信小程序:发布动态页面模板
    1前言由于功能需求,需要在小程序中开发社区打卡模块。打卡模块中上传发布的界面是必不可少的。于是利用flex布局设计了上传动态的页面。页面截图如下:由于是模板分享,这里也不做过多介绍了,通过代码来说明吧。页面主要有四个文件,分别是create.js、create.json、create.wxml、cre......