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

wx:if

在小程序中,使用wx:if="{{condition}}"来判断是否需要渲染该代码

也可以用wx:elif和wx:else来添加else判断

<!--pages/ifIndex/ifindex.wxml-->
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

结合<block>使用wx:if

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

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

示例如下,条件为真则渲染:

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

条件为假不渲染

 hidden

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


<view hidden="{{flag}}">条件为true的时候隐藏元素,否责显示</view>

在js文件中data设置一个flag值

// pages/ifIndex/ifindex.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    flag:true
  }
})

 

wx:if 与 hidden 的对比

① 运行方式不同

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

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

② 使用建议

  • 频繁切换时,建议使用 hidden
  • 控制条件复杂时,建议使用 wx:if 搭配 wx:elif 、 wx:else 进行展示与隐藏的切换

列表渲染

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

Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr1 : [
      "apple","huawei","xiaomi"
    ]
  }
})
<view wx:for="{{arr1}}">
索引是:{{index}},item是:{{item}}
</view>

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

手动指定索引和当前项的变量名(了解)

  • 使用 wx:for-index 可以指定当前循环项的索引的变量名
  • 使用 wx:for-item 可以指定当前项的变量名
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemname">
索引是:{{idx}},item是:{{itemname}}
</view>

 

wx:key 的使用

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

添加一个数组数据:

// pages/ifIndex/ifindex.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr1 : [
      "apple","huawei","xiaomi"
    ],
    userList : [
      {id:1,name:"小红"},
      {id:2,name:"小明"},
      {id:3,name:"小白"}
    ]
  }
})

 

注意:如不提供 wx:key,会报一个 warning,从上图可以看出,警告中告诉我们可以提供一个wx:key来提高渲染效率, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。 

下面内容贴自原文链接:https://blog.csdn.net/qq_69891466/article/details/131605236

wx:key一般是用在wx:for或者其他需要动态渲染的地方,采用wx:key可以对渲染列表中的元素给定唯一标识,使当我们的数组发生改变时,渲染中的原数据可以保持自己的特性。

举个例子,现在有个点击按钮勾选的例子,当我们勾选羔羊排骨一条,点击增加数据后,羔羊排骨左侧的被选中状态按理来说是应该一直跟随羔羊排骨的,但是我们可以发现被选中按钮并没有跟随羔羊排骨变化,而是哪个数据是第一个哪个数据就是被选中状态,这就是因为我们在写for循环时没有添加wx:key没有给定数据一个唯一的标识导致算法无法固定原有数据的渲染。

当我们采用wx:key之后,原数据的渲染状态就不会改变了


                        

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

卷积神经网络结构组成与解释

卷积神经网络结构组成与解释 卷积神经网络是以卷积层为主的深度网路结构&#xff0c;网络结构包括有卷积层、激活层、BN层、池化层、FC层、损失层等。卷积操作是对图像和滤波矩阵做内积&#xff08;元素相乘再求和&#xff09;的操作。 1. 卷积层 常见的卷积操作如下&#x…

基于Java的应急资源管理系统 (源码+文档+包运行)

一.系统概述 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本应急资源管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数…

Geeker-Admin:基于Vue3.4、TypeScript、Vite5、Pinia和Element-Plus的开源后台管理框架

Geeker-Admin&#xff1a;基于Vue3.4、TypeScript、Vite5、Pinia和Element-Plus的开源后台管理框架 一、引言 随着技术的不断发展&#xff0c;前端开发领域也在不断演变。为了满足现代应用程序的需求&#xff0c;开发人员需要使用最新、最强大的工具和技术。Geeker-Admin正是…

Linux 文件页反向映射

0. 引言 操作系统中与匿名页相对的是文件页&#xff0c;文件页的反向映射对比匿名页的反向映射更为简单。如果还不清楚匿名页反向映射逻辑的&#xff0c;请移步 匿名页反向映射 1. 文件页反向映射数据结构 struct file&#xff1a; 用户进程每open()一次文件&#xff0c;则会生…

分布式事务(一)

一、序言 本文介绍分布式事务相关的基本概念。 二、什么是分布式事务 分布式事务是指涉及多个独立计算机或系统的事务操作&#xff0c;这些计算机或系统可能位于不同的物理位置&#xff0c;彼此之间通过网络进行通信。分布式事务的目标是确保在分布式环境中的多个参与者之间…

物联网:门锁RNBN-K18使用记录

摘要&#xff1a;对 RNBN品牌下 K18智能门锁日常使用操作经验记录。 常见问题&#xff1a; 1.门锁联网时&#xff0c;找不到 wifi 怎么办。 答&#xff1a;检查一下几个方面&#xff1a;1. wifi 信号是否是2.4G&#xff0c;2.wifi信号是否距离没锁很远。因为门锁只能获取到2…

数据分析案例(三):基于RFM分析的客户分群

实验2 基于RFM分析的客户分群 Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢…

Alibaba --- 如何写好 Prompt ?

如何写好 Prompt 提示工程&#xff08;Prompt Engineering&#xff09;是一项通过优化提示词&#xff08;Prompt&#xff09;和生成策略&#xff0c;从而获得更好的模型返回结果的工程技术。总体而言&#xff0c;其实现逻辑如下&#xff1a; &#xff08;注&#xff1a;示例图…

PE程序底层结构与恶意代码插入与执行的研究

Windows PE程序底层结构分析 PE&#xff08;Portable Executable&#xff09;是一种Windows操作系统下可执行文件的标准格式 Windows PE程序结构和Linux的elf程序结构类似&#xff0c;首先一个名为simple64.exe程序里有一个头文件和一个段文件&#xff0c;头文件里主要存放的是…

使用Charles断点修改接口返回数据

问题&#xff1a;数量/金额原来接口是用一个字段返回&#xff0c;由于业务需要换行展示&#xff0c;后端便拆分成了两个字段&#xff0c;前端则需要用新拆分的字段去取值&#xff0c;导致目前发现有个字段的金额也取成了件数&#xff08;红框部分&#xff09;&#xff1b;需求&…

设备树下的 LED 驱动实验

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、修改设备树文件二 创建设备树节点并获取属性 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;随着人工智能的不断…

有真的副业推荐吗?

#有真的副业推荐吗# 我做副业项目的时候&#xff0c;认识了一位带娃宝妈&#xff0c;讲一下她空闲时间做副业赚钱的故事吧。在一个温馨的小家庭里&#xff0c;李婷是一位全职宝妈&#xff0c;她的主要任务是照顾和陪伴自己可爱的宝宝。然而&#xff0c;随着宝宝逐渐长大&#x…

196算法之谜在 JSP 中使用内置对象 request 获取 form 表单的文本框 text 提交的数据。

(1&#xff09;编写 inputNumber . jsp &#xff0c;该页面提供一个 form 表单&#xff0c;该 form 表单提供一个文本框 text &#xff0c;用于用户输入一个正整数&#xff0c;用户在 form 表单中输入的数字&#xff0c;单击 submit 提交键将正整数提交给 huiwenNumber . jsp 页…

5.9 mybatis之callSettersOnNulls作用

文章目录 1. 当callSettersOnNullstrue时2. 当callSettersOnNullsfalse时 在mybatis的settings配置参数中有个callSettersOnNulls参数&#xff0c;官方解释为&#xff1a;指定当结果集中值为 null 的时候是否调用映射对象的 setter&#xff08;map 对象时为 put&#xff09;方法…

【菜狗学前端】ES6+笔记(包含Promise及async、await等)

老样子。复制上来的图片都没了&#xff0c;想看原版可以移步对应资源下载(资源刚上传&#xff0c;还在审核中) &#xff08;免费&#xff09;菜狗学前端之ES6笔记https://download.csdn.net/download/m0_58355897/89135424 一 解构赋值 解构赋值 解构指的是把一个数据…

2024年广东省网络系统管理样题第3套网络部署部分

2024年广东省网络系统管理样题第3套网络部署部分 模块A&#xff1a;网络构建 极安云科专注职业教育技能培训4年&#xff0c;包含信息安全管理与评估、网络系统管理、网络搭建等多个赛项及各大CTF模块培训学习服务。本团队基于赛项知识点&#xff0c;提供完整全面的系统性理论教…

Bridge 桥接

意图 将抽象部分与其显示部分分离&#xff0c;使他们都可以独立地变化。 结构 其中&#xff1a; Abstraction定义抽象类的接口&#xff0c;维护一个指向Implementer类型对象的指针。RefinedAbstraction扩展由Abstraction定义的接口。Implementor定义实现类的接口&#xff0c…

并发编程之ThreadLocal使用及原理

ThreadLocal主要是为了解决线程安全性问题的 非线程安全举例 public class ThreadLocalDemo {// 非线程安全的private static final SimpleDateFormat sdf new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");public static Date parse(String strDate) throws ParseExc…

Spring源码刨析之配置文件的解析和bean的创建以及生命周期

public void test1(){XmlBeanFactory xmlBeanFactory new XmlBeanFactory(new ClassPathResource("applicationContext.xml"));user u xmlBeanFactory.getBean("user",org.xhpcd.user.class);// System.out.println(u.getStu());}先介绍一个类XmlBeanFac…

服务器主机关机重启告警

提取时间段内系统操作命名&#xff0c;出现系统重启命令&#xff0c;若要出现及时联系确认 重启命令&#xff1a; reboot / init 6 / shutdown -r now&#xff08;现在重启命令&#xff09; 关机命令&#xff1a; init 0 / shutdown -h now&#xff08;关机&#…