微信小程序——列表渲染（wx:for）

╰半橙微兮° 2023-06-13 11:23 15阅读 0赞

项的变量名默认为item wx:for--item\--**可以指定数组当前元素的变量名**

下标变量名默认为index wx:for--index\--**可以指定数组当前下标的变量名**

wx:key ⽤来提⾼数组渲染的性能

wx:key 绑定的值 有如下选择

1. string 类型，表⽰ 循环项中的唯⼀属性 如

![20191117112419285.png][]

2. 保留字 \*this ，它的意思是 item 本⾝ ，\*this 代表的必须是 唯⼀的字符串和数组

![20191117112520775.png][]

![20191117112609838.png][]

![20191117112643726.png][]

ps:

如果在一个标签里面使用多次的wx:for标签的话要注意:

1.你要确定每个wx:key中的值是唯一的。

2.你要在第一个for循环的时候就得只用wx:for-item 设置该数组的变量的名字和 wx:for-index下标的名称

3.如果你是在wxml里面传值到js在渲染到另外一个页面或者是传值到另外一个数组的时候要注意的是

如果要显示值得话直接写你该数组的变量的名字和显示该数组的下标的话直接写的是wx:for-index下标的名称

例子：复选框选中多少个值就显示多少个值

需求：

1。将复选框选中的值存到数组list中

通过第一个for循环将数据显示到wxml中

2。将list数组赋值到新增数组list1中

3。再通过第二个for循环将数据显示到wxml中

代码：

wxml:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70][]

js：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70 1][]

[20191117112419285.png]: https://img-blog.csdnimg.cn/20191117112419285.png
[20191117112520775.png]: https://img-blog.csdnimg.cn/20191117112520775.png
[20191117112609838.png]: https://img-blog.csdnimg.cn/20191117112609838.png
[20191117112643726.png]: https://img-blog.csdnimg.cn/20191117112643726.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191117113817190.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191117113939860.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llem9uZ3poZW4=,size_16,color_FFFFFF,t_70