微信小程序列表渲染和条件渲染

最新推荐文章于 2025-06-25 08:55:28 发布

Modify_QmQ

最新推荐文章于 2025-06-25 08:55:28 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： # 小程序文章标签：列表渲染条件渲染微信小程序

本文链接：https://blog.csdn.net/qq_44973159/article/details/104721682

小程序专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了在小程序开发中如何使用if条件判断、列表循环以及条件渲染等核心功能，通过具体代码示例展示了如何在视图中动态展示数据，适用于初学者快速掌握小程序基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先是if条件判断，如下代码段：先给出条件判断表达式，接上问号，第一个值是为true的结果，冒号后面是为false的结果

<view>{{10%2==0?"偶数":"奇数"}}</view>     <!--if条件判断-->

再在js当中定义了一个list列表。在定义列表如下代码所示：给出一个简单的列表。

 list:[
      {
      id:0,
      name:"月月鸟"
    },
    {
      id:1,
      name:"月月大鸟"
    }
    ]

怎么获取列表的值呢，这个使用就要使用wx:for了，先wx:for给出要循环的对象，这里也就是list列表，wx:for-index和wx:for-item的值就好比于for循环当中的i和j。最后的wx:key只是对循环做一个优化，节省时间，给出的值必须是在列表当中是唯一的值，好比主键

<view wx:for="{{list}}" wx:for-index="index" wx:for-item="item" wx:key="id">
<!--列表循环，索引和值，以及优化索引（给出唯一列）-->
索引：{{index}}----{{item.name}}--{{item.id}}
</view>

需要注意的是，这里的{{index}}获取的值是索引值，从0开始。
当然在前面定义的person对象也可以使用wx:for进行取值：地址链接

<!--如果只有一层循环，可以省略wx:for-index 和 wx:for-item-->
<view wx:for="{{person}}" wx:key="name">
属性：{{index}}--值：{{item}}
</view>

再就是wx:if,表示的意思就是是否移除该标签：运行后，在控制台当中，与console同级的Wxml当中耒阳看到在等于false的值的标签是看不到了的。

<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">隐藏</view>

使用hidden属性，只是将其隐藏。

<view hidden="{{true}}">hiddden</view>