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之后,原数据的渲染状态就不会改变了


                        

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

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

相关文章

【Linux】磁盘与文件系统管理

目录 一、 磁盘结构 1. 数据结构 2. 物理结构 3. 硬盘的接口类型 二、 如何使用Linux中的磁盘 三、 文件系统 四、 磁盘分区 1. MBR分区 2. 分区的优缺点 3. 磁盘及分区的管理工具 五、格式化与挂载 1. 格式化 2. 挂载 六、实例演示 1. 演示分区格式化挂载 2. …

24年大一4月14日训练(东北林业大学)

前言&#xff1a; 今晚的5道题。 正文&#xff1a; Problem:A宋哥猜拳(2)&#xff1a; #include<bits/stdc.h> using namespace std; int main(){int t;cin>>t;while(t--){string x;cin>>x;int a0,b0,c0,lx.length();// cout<<l;for(int i0;i<l;i…

反射与动态代理

一、反射 什么是反射? 反射允许对成员变量&#xff0c;成员方法和构造方法的信息进行编程访问 1.获取class对象的三种方式 Class这个类里面的静态方法forName&#xff08;“全类名”&#xff09;&#xff08;最常用&#xff09; 通过class属性获取 通过对象获取字节码文件对…

20240414,类的嵌套,分文件实现

笑死&#xff0c;和宝哥同时生病了 一&#xff0c;封装-案例 1.0 立方体类 #include<iostream>//分别用全局函数和成员函数判定立方体是否相等 using namespace std;class Cube { public:int m_area;int m_vol;int geth(){return m_h;}int getl() { return m_l; }int…

C# Window form 自定义控件的结构和设计(三)

C# Window form 自定义控件的结构和设计(三) 一、前面介绍了如何来创建第一个自定义的控件&#xff0c;以及一个测试程序。下面我们来看下如何在自定义控件中添加属性。 C#和其他.NET语言支持属性作为语言的第一类成员。把属性作为语言的基础属性有两点主要的有点&#xff1a…

Flutter第八弹 构建拥有不同项的列表

目标&#xff1a;1&#xff09;项目中&#xff0c;数据源可能涉及不同的模版&#xff0c;显示不同类型的子项&#xff0c;类似RecycleView的itemType, 有多种类型&#xff0c;列表怎么显示&#xff1f; 2&#xff09;不同的数据源构建列表 一、创建不同的数据源 采用类似Rec…

UE C++ 知识杂记

FString、FName与 FText FName&#xff1a;&#xff08;可以有效地存储名称和对资产或对象的引用&#xff09; 它主要用于存储和引用名称&#xff0c;例如对象名称、属性名称和资产名称。引擎中的资源名称都是FName类型&#xff0c;通过一个轻型系统重复使用字符串&#xff0c…

vue3知识点补充第二节

01 自定义Hook 正常的组件&#xff1a;<template><div><img id"img" src"./assets/images/01.png" width"300" height"300"></img></div></template><script>// 导入hook组件 并传递一个…

【设计模式】六大设计原则

设计原则 研究 23 种设计模式是困难的&#xff0c;甚至是没必要的六大设计原则零、单一职责原则开闭原则里氏代换原则依赖倒置原则接口隔离原则迪米特法则合成复用原则 研究 23 种设计模式是困难的&#xff0c;甚至是没必要的 设计模式有23种&#xff0c;我认为对普通人来说想…

快速寻找可以构建出网通信隧道的计算机

点击星标&#xff0c;即时接收最新推文 本文选自《内网安全攻防&#xff1a;红队之路》 扫描二维码五折购书 为加强内网的安全防范&#xff0c;安全管理员往往会限制内网计算机访问互联网&#xff0c;当然不同机构的限制策略是不一样的&#xff0c;有的完全阻断了内网计算机访问…

如何发布自己的Python库?

Python包发布 1、背景概述2、操作指南 1、背景概述 为什么我们要发布自己的Python库&#xff1f;如果你想让你的Python代码&#xff0c;通过pip install xxx的方式供所有人下载&#xff0c;那就需要将代码上传到PyPi上&#xff0c;这样才能让所有人使用 那么&#xff0c;如何发…

Java基础知识总结(54)

&#xff08;1&#xff09; 手动实现LinkedList LinkedList底层结构实现和ArrayList底层数据结构实现有着本质上的区别 ArrayList底层实现主要依赖数组&#xff0c;而LinkedList底层实现则是依赖链表。 /** LinkedList的实现是双向链表&#xff0c;因此需要定义首节点和尾结点…

群晖双硬盘实时备份(WebDAV Server+Cloud Sync)

安装和设置 WebDAV Server WebDAV 是一种基于HTTP的协议扩展&#xff0c;它允许用户在远程Web服务器上进行文档的编辑和管理&#xff0c;就如同这些文件存储在本地计算机上一样。使用WebDAV&#xff0c;用户可以创建、移动、复制和修改文件和文件夹。 安装和设置 Cloud Sync…

2024/4/12 网络编程day2

OSI模型中的网络层次有哪些&#xff1f; 物理层&#xff0c;数据链路层&#xff0c;网络层&#xff0c;传输层&#xff0c;会话层&#xff0c;表示层&#xff0c;应用层TCP/IP协议族的分层有哪些&#xff1f; 网络接口层&#xff0c;网络层&#xff0c;运输层&#xff0c;应用层…

使用 Prometheus 在 KubeSphere 上监控 KubeEdge 边缘节点(Jetson) CPU、GPU 状态

作者&#xff1a;朱亚光&#xff0c;之江实验室工程师&#xff0c;云原生/开源爱好者。 KubeSphere 边缘节点的可观测性 在边缘计算场景下&#xff0c;KubeSphere 基于 KubeEdge 实现应用与工作负载在云端与边缘节点的统一分发与管理&#xff0c;解决在海量边、端设备上完成应…

前端面试问题汇总 - 浏览器篇

1. 本地存储有哪些&#xff0c;区别是什么&#xff1f; Cookies&#xff08;Cookie&#xff09;&#xff1a; 是存储在用户计算机上的小型文本文件&#xff0c;由网站服务器发送到用户的浏览器&#xff0c;然后在用户访问网站时由浏览器发送回服务器。Cookies 可以用来存储用户…

地球上四大洋介绍

地球上四大洋的分布是&#xff1a; 太平洋&#xff1a;太平洋是世界上最大的海洋&#xff0c;覆盖了约三分之一的地球表面。它位于亚洲、澳大利亚、美洲和南极洲之间。太平洋的面积约为1.6亿平方公里&#xff0c;拥有世界上最深的点——马里亚纳海沟。 大西洋&#xff1a;大西…

2024HW --> 安全产品 Powershell无文件落地攻击

在HW中&#xff0c;除了了解中间件&#xff0c;web漏洞&#xff0c;这些攻击的手法&#xff0c;还得了解应急响应&#xff0c;安全产品&#xff0c;入侵排查&#xff0c;溯源反制...... 那么今天&#xff0c;就来说一下安全产品&#xff08;安全公司我就不说了&#xff0c;这个…

ffmpeg cuda硬件解码后处理使用opengl渲染,全硬件流程

1 ffmpeg 硬件解码 使用硬件解码后不要transfer到内存&#xff0c;使用cuda转化nv12 -> bgr24 转化完毕后cuda里面存了一份bgr24 2 gpumat 和 cuda 互操作 如果需要opencv gpumat直接使用cuda内存&#xff0c;则可以手动构造gpumat 可以使用gpumat的各种函数 uchar3* cu…

6-139 大整数存储-数组

本题要求实现一个函数,实现大整数以整数形式存储。大整数按每4位保存在整数数组中,如果大整数位数不是4的倍数,则将保证低位都按4位一存。如“123456789”保存为1,2345,6789。大整数以字符串形式输入 int convert(char a[],int x[]); 函数接口定义: a 是以字符串形式输…