WXML模板语法-条件渲染和列表渲染

一、条件渲染

1.wx:if

在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块,也可以用wx:elif和wx:else来添加else判断

// pages/list/list.js
Page({data: {type:1}
})
<!--pages/list/list.wxml--><view wx:if="{{type === 1}}"> True </view>
<view wx:elif="{{type === 2}}"> False </view>
<view wx:else> 0 </view>

2.结合<block>使用wx:if

如果要一次性控制多个组件的展示与隐藏,可以使用一个<block></block>标签将多个组件包装起来,并在<block>标签上使用wx:if控制属性

<!--pages/list/list.wxml--><block wx:if="{{type === 1}}"><view> view1 </view><view> view2 </view>
</block>

注意:<block>并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染

3.hidden

在小程序中,直接使用hidden="{{condition}}"也能控制元素的显示与隐藏

// pages/list/list.js
Page({data: {flag:true}
})
<!--pages/list/list.wxml-->
<view hidden="{{flag}}"> 条件为true的时候隐藏元素,否则显示</view>

4.wx:if和hidden对比

(1)运行方式不同

wx:if 以动态创建和移除元素的方式控制元素的展示和隐藏

hidden 以切换样式的方式(display:none/block),控制元素的显示与隐藏

(2)使用建议:

频繁切换时,使用hidden

控制条件复杂时,使用wx:if

二、列表渲染

1.wx:for

通过wx:for可以根据指定的数组,循环渲染重复的组件结构

默认情况下,当前循环项的索引用index表示,当前循环项用item表示

// pages/list/list.js
Page({data: {arr1:[1,2,3,4,5]}
})
<!--pages/list/list.wxml-->
<view wx:for="{{arr1}}">索引是:{{index}},item项是:{{item}}
</view>

2.手动指定索引和当前项的变量名*

(在实际开发中用到的不多)

使用 wx:for-index 可以指定当前循环项的索引的变量名

使用 wx:for-item 可以指定当前项的变量名

<!--pages/list/list.wxml-->
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">索引是:{{idx}},item项是:{{itemName}}
</view>

3.wx:key 的使用

类似于Vue列表渲染中的 :key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的key值,从而提高渲染的效率

// pages/list/list.js
Page({data: {userList:[{id:1,name:'小红'},{id:2,name:'小明'},{id:3,name:'小白'},]}
})
<!--pages/list/list.wxml-->
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

注意在指定key的时候,外面不用包Mustache语法,直接将对应的key值填充过来即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/14718.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

504 Gateway Time-out

问题描述 做Excel导入的功能&#xff0c;由于Excel的数据比较多&#xff0c;需要做处理然后入库&#xff0c;数据量大概200万&#xff0c;所以毫无悬念的导入Excel接口调用超过了一分钟&#xff0c;并且报错&#xff1a;504 gateway timeout。 解决方案 nginx超时限制。路径…

与WAF的“相爱相杀”的RASP

用什么来保护Web应用的安全&#xff1f; 猜想大部分安全从业者都会回答&#xff1a;“WAF&#xff08;Web Application Firewall,应用程序防火墙&#xff09;。”不过RASP&#xff08;Runtime Application Self-Protection&#xff0c;应用运行时自我保护&#xff09;横空出世…

微信小程序-----基础加强(二)

能够知道如何安装和配置vant-weapp 组件库能够知道如何使用MobX实现全局数据共享能够知道如何对小程序的API 进行 Promise 化能够知道如何实现自定义tabBar 的效果 一.使用 npm 包 小程序对 npm 的支持与限制 目前&#xff0c;小程序中已经支持使用 npm 安装第三方包&#x…

采用Java语言开发的(云HIS医院系统源码+1+N模式,支撑运营,管理,决策多位一体)

采用Java语言开发的&#xff08;云HIS医院系统源码1N模式&#xff0c;支撑运营&#xff0c;管理&#xff0c;决策多位一体&#xff09; 是不是网页形式【B/S架构]才是云计算服务? 这是典型的误区! 只要符合上述描述的互联网服务都是云计算服务&#xff0c;并没有规定是网页…

东软联合福建省大数据集团打造“数据要素×医疗健康”服务新模式

5月23日&#xff0c;东软集团与福建省大数据集团有限公司在福州签订战略合作协议。 据「TMT星球」了解&#xff0c;双方将在健康医疗数据要素价值领域展开合作&#xff0c;通过大数据服务&#xff0c;赋能商业保险公司的产品设计和保险两核&#xff0c;打造“数据要素医疗健康…

安卓分身大师4.6.0解锁会员安卓14可用机型伪装双开多开

需登录解锁会员功能&#xff0c;除了加速进入不能&#xff0c; 其他主要功能都是可以使用&#xff0c;由于验证较多一些功能需要特定操作使用&#xff0c;进行伪装时请不要直接伪装&#xff0c;先生成成功后再进行自定义伪装&#xff01;链接&#xff1a;https://pan.baidu.com…

机器人非线性控制方法——线性化与解耦

机器人非线性控制方法是针对具有非线性特性的机器人系统所设计的一系列控制策略。其中&#xff0c;精确线性化控制和反演控制是两种重要的方法。 1. 非线性反馈控制 该控制律采用非线性反馈控制的方法&#xff0c;将控制输入 u 分解为两个部分&#xff1a; α(x): 这是一个与…

设计模式--观察者模式

观察者模式是一种行为设计模式&#xff0c;它定义了对象间的一种一对多的依赖关系&#xff0c;当一个对象的状态发生改变时&#xff0c;它的所有依赖者都会自动收到通知并更新。这种模式在许多应用场景中非常有用&#xff0c;例如在实现事件驱动编程、消息队列、发布-订阅模型以…

vue 引入 emoji 表情包

vue 引入 emoji 表情包 一、安装二、组件内使用 一、安装 npm install --save emoji-mart-vue二、组件内使用 import { Picker } from "emoji-mart-vue"; //引入组件<picker :include"[people,Smileys]" :showSearch"false" :showPreview&q…

秒杀系统如何设计?【面试准备】

秒杀系统如何设计&#xff1f;【面试准备】 前言版权推荐秒杀系统如何设计&#xff1f;库存如何扣减的设计支付-延时队列最后 前言 2023-9-1 16:23:31 公开发布于 2024-5-22 00:09:02 以下内容源自《【面试准备】》 仅供学习交流使用 版权 禁止其他平台发布时删除以下此话…

找钢集团亮相沙特利雅得建筑行业供应链展会

5月20日-21日&#xff0c;找钢产业互联集团&#xff08;以下简称&#xff1a;找钢集团&#xff09;亮相沙特利雅得建筑行业供应链展会。本次展会由沙特阿拉伯国家住房公司&#xff08;NHC&#xff09;主办&#xff0c;中信建设协办&#xff0c;涵盖住房新科技、绿色环保等多个主…

六零导航页 file.php 任意文件上传漏洞复现(CVE-2024-34982)

0x01 产品简介 LyLme Spage(六零导航页)是中国六零(LyLme)开源的一个导航页面。致力于简洁高效无广告的上网导航和搜索入口,支持后台添加链接、自定义搜索引擎,沉淀最具价值链接,全站无商业推广,简约而不简单。 0x02 漏洞概述 六零导航页 file.php接口处任意文件上传…

使用API有效率地管理Dynadot域名,进行域名邮箱的默认邮件转发设置

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…

头歌OpenGauss数据库-I.复杂查询第5关:至少学了某位学生(Oliver)所学的全部课程的学生

本关任务&#xff1a;根据提供的表和数据&#xff0c;查询至少学了Oliver同学所学的全部课程的其他同学的信息&#xff08;学号s_id&#xff0c;姓名s_name&#xff09;。 student表数据&#xff1a; s_ids_names_sex01Mia女02Riley男03Aria女04Lucas女05Oliver男06Caden男07Li…

DFS:解决二叉树问题

文章目录 了解DFS1.计算布尔二叉树的值思路代码展示 2.求根节点到叶节点数字之和思路代码展示 3.二叉树剪枝思路代码展示 4.验证二叉搜索树思路分析代码展示 5.二叉搜索树中第k小元素思路&#xff1a;代码展示 6.二叉树的所有路径思路分析代码展示 总结 了解DFS 所谓DFS就是就…

OceanBase V4.2 特性解析:MySQL兼容之rename column 语法支持

1. 背景描述 MySQL 自8.0版本起&#xff0c;已支持rename column语法&#xff0c;这一语法允许用户在不更改列定义的情况下&#xff0c;为列重新命名。下面为使用rename column语法的一个具体示例&#xff1a; alter table t1 rename column col_a to col_b; 在OceanBase过去…

如何秒杀Promise面试题

如何秒杀Promise面试题 如果你在面试的时候技术面给你出了点关于Promise的面试题首先不要慌&#xff0c;先问候他爹妈一套问候语&#xff01; 然后切记不要(ps:这是病句别在意!&#x1f923;) 自己想 找他要纸和笔 首先关于promise的面试题无非就是 promise 的状态和宏队列、…

git pull 出错 fatal: bad object refs/remotes/origin/xxxxx

使用git pull时出现以下问题 fatal: bad object refs/remotes/origin/xxxxx error: https://github.com/xxxxxx.git did not send all necessary objects解决办法 删除项目目录 .git\refs\remotes\origin 下面的所有文件 在 git pull 参考链接 How to handle git gc fatal: b…

5.23.9 TransUNet:Transformers 为医学图像分割提供强大的编码器

TransUNet&#xff0c;它兼具 Transformers 和 U-Net 的优点&#xff0c;作为医学图像分割的强大替代方案。一方面&#xff0c;Transformer 对来自卷积神经网络 (CNN) 特征图的标记化图像块进行编码&#xff0c;作为用于提取全局上下文的输入序列。另一方面&#xff0c;解码器对…

css去除复选框默认样式

HTML: <input type"checkbox" id"myCheckbox" class"custom-checkbox" /> <label for"myCheckbox" class"checkbox-label">自定义复选框</label> CSS: /* 隐藏默认复选框 */.custom-checkbox { -webk…