学习笔记——wxml中wx-for、wx-if的用法

最新推荐文章于 2024-06-29 08:20:05 发布

顺遂时光

最新推荐文章于 2024-06-29 08:20:05 发布

阅读量635

点赞数 3

文章标签：学习笔记前端微信小程序

本文链接：https://blog.csdn.net/m0_63309256/article/details/136870002

版权

本文介绍了微信小程序中wx:for属性用于数组循环渲染以及wx:if控制属性的用法，通过实例演示了如何在页面中根据条件显示或隐藏内容。

摘要由CSDN通过智能技术生成

1、wx:for是<block>标签中常用的一个属性，用于对一个数组进行循环渲染。在 wx:for中，可以使用 wx:for-item 属性来定义每次循环的变量名，这个变量名通常用于表示当前遍历的元素值。这个变量名就是所谓的 item。

<block wx:for="{{list}}" wx:for-item="item" wx:key="index">
  <view>
    {{index}}:{{item}}
  </view>
</block>

wx:for="{{list}}"代表对list数组进行循环渲染，wx:for-item="item"中item,js代码如下

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:'1234'
  },
})

2、wx：if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<view wx:if="{{condition}}">
  Content to render when condition is true
</view>

Page({

  /**
   * 页面的初始数据
   */
  data: {
    condition:false,
  },
})

结果为

当js代码为

Page({

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

结果为：

关注