位置: IT常识 - 正文
【微信小程序】条件渲染和列表渲染(微信小程序开发)
编辑：rootadmin推荐整理分享【微信小程序】条件渲染和列表渲染(微信小程序开发)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:微信小程序在哪里找?,微信小程序在哪里找?,微信小程序制作,微信小程序开发平台,微信小程序店铺怎么开,微信小程序怎么制作自己的小程序,微信小程序店铺怎么开,微信小程序怎么制作自己的小程序,内容如对您有帮助，希望把文章链接给更多的朋友！
🍒🍒 观众老爷们好啊，牛牛又更新了，上文我们详细了解了微信小程序中的事件绑定，那么今天我们就来讲讲WXML语法中的列表渲染和条件渲染，它俩也是非常重要的知识点，赶紧学起来吧。 🍒🍒 不过首先，我们想来补充一下数据传参的知识点以及常用的input事件用法。
文章目录一，事件传参二，input事件使用三，条件渲染四，列表渲染一，事件传参首先我们需要知道，微信小程序中事件处理函数的传参，并不能直接在绑定时间的同时做，也就是说以下这样操作。
<view bindtap="tapName(2)">错误</view>是不行的，如此编译器只会将整个tapName(2)识别成事件处理函数的名字。
如果想要传参，需要为组件提供自定义属性，格式如此——data-*，*代表该自定义属性的名字。
具体实现如下：
<view bindtap="tapName" data-info="{{2}}"></view>然后我们在事件处理函数中，只需要通过event.target.dataset.info即可获取该传入的参数。
还记得之前说过事件对象event中的target属性吗，里面就是记录触发事件组件的一些属性值，上面用到的原理就是这里。
小tip： 需要注意的是，对于已经确认为数值的参数，我们采用Mustache语法，也就双括号括住参数，而如果我们只是用双引号包围，如下：
<view bindtap="tapName" data-info="2"></view>解析到的data-info的值将会是一个字符串，"2"。
二，input事件使用input事件在小程序开发中是比较常用的，具体表述就是为文本框绑定事件，当内容发生变化触发。
如下设置：
<input type="text" bidninput="changetext"></input>一般我们使用该事件时，需要在对应的事件处理函数获取到input文本框的输入值，可以如下进行操作：
changetext(e){console.log(e.detail.value)}e.detail.value就是对应着变化后的最新值。
三，条件渲染条件渲染其实就相当于在WXML中的if语句，利用条件判断是否渲染某一个或一部分的组件。
语法为wx:if="{{condition}}"，通过判断里面的condition增加来渲染，如果为true，则渲染组件。
除了if，还有与之配套的elif和else。
<view wx:if="{{type==1}}">男</view><view wx:if="{{type==2}}">女</view><view>不详</view>当type为1，只有第一个view组件被渲染，当type为2，只有第二个组件被渲染，如果均不满足，则只渲染第三个组件。
其实条件渲染除了if还有hidden可以做到。
语法为hidden= "{{condition}}"，hidden为组件属性，当里面condition条件值为false，组件不隐藏，为true，组件隐藏。
说到这里大家可能发觉，我们还不知道如何一次性控制多组件展示隐藏。
微信小程序中有一个<block>，它并不是组件，只是有包裹性质的容器，即使写进wxml，也不会被渲染（调试器也不会看到它的存在），我们可以利用它来实现。
<block wx:if="{{info==1}}"><view>a</view><view>b</view><view>c</view></block>if和hidden对比：
从本质上，
if是动态创建和移除组件而hidden是通过改变样式，设置display为none或block实现的从使用上，当我们需要频繁的切换时，建议使用hidden，而当控制条件复杂时，特别需要用到elseif效果的时候，建议使用if。
四，列表渲染列表渲染其实从理解上，就是在wxml语法中的for语句，实现循环。
语法为wx:for="{{array}}"，根据指定数组，循环渲染复杂的组件，注意，双括号中的是数组哦。使用中，我们一般同时还有给其设定唯一key值，语法为wx:key。
比如我们的数组如下：
user:[{id:1, name:"apple"},{id:2, name:"add"},{id:3, name:"abandon"}]这样我们可以设置wx:key="id"，当我们调用里面的name，循环会根据key遍历，调用时key为何值，调用就是哪一个name值。
<view wx:for="{{user}}" wx:key="id">{{name}}<view>需要注意的是，设置key不需要使用{{}}
如果数组没有这种id属性，我们可以直接设定key为index，如wx:key="index"，也是可以循环遍历数组。
好啦，本次小程序的文章到这里就结束啦，如果对您有帮助的话，可以继续关注牛牛后续的文章呀，您的支持是我们创作的最大动力！
🍒牛牛最近发现一款刷题神器，各大互联网大厂的面试真题，还有超大面试题库。 🍒里面还有很多大佬的面经，赶紧卷起来！！ 点击直接访问
债见~~
上一篇：DEFORMABLE DETR详解(deformable detr代码)
下一篇：【react从入门到精通】初识React(react 入门教程)
