微信小程序学习(五):条件渲染与列表渲染

1、条件渲染

条件渲染主要用来控制页面结构的展示和隐藏,在微信小程序中实现条件渲染有两种方式:

  • 使用 wx:ifwx:elifwx:else 属性组
  • 使用 hidden 属性
<view wx:if="{{num === 1}}"> 1 </view>
<view wx:elif="{{num === 2}}"> 2 </view>
<view wx:else> 3…… </view>

<view hidden="{{flag}}"> 1 </view>

wx:ifhidden 二者的区别:

  • wx:if:当条件为 true 时将内容渲染出来,否则元素不会进行渲染,通过 移除/新增节点 的方式来实现
  • hidden:当条件为 true 时会将内容隐藏,否则元素会显示内容,通过 display 样式属性来实现的

2、列表渲染

2.1 基本使用

列表渲染:就是指通过循环遍历一个数组或对象,将其中的每个元素渲染到页面上

  • 只需要在组件上使用 wx:for 属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件
  • 默认数组当前项的变量名默认为 item
  • 默认数组的当前项的下标变量名默认为 index
  • 在使用 wx:for 对数组进行遍历的时候,建议加上 wx:key 属性,如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,即以后数据不会改变,或者不必关注其顺序,可以选择忽略。
  • wx:key 的值以两种形式提供:
    • 字符串:代表需要遍历的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变
    • 保留关键字 *this 代表在 for 循环中的 item 本身当 item 本身是一个唯一的字符串或者数字时可以使用
<!-- 如果渲染的是数组,item:数组的每一项,index:下标 -->
<view wx:for="{{ numList }}">{{ item }} - {{ index }}</view>

<!-- 如果渲染的是对象,item:对象属性的值,index:对象属性 -->
<view wx:for="{{ obj }}">{{ item }} - {{ index }}</view>

<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }}</view>
<view wx:for="{{ fruitList }}" wx:key="index">{{ item.name }}</view>

<!-- 保留关键字 *this,*this 代表的是 item 本身,item 本身是唯一的字符串或者数字 -->
<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>

2.2 修改默认下标和变量名

如果需要对默认的下标和变量名进行修改,可以使用 wx:for-itemwx:for-index

  • 使用 wx:for-item 可以指定数组当前元素的变量名
  • 使用 wx:for-index 可以指定数组当前下标的变量名
<view wx:for="{{ animal }}" wx:for-item="itemName" wx:for-index="i">
  {{ itemName.name }} - {{ itemName.avatar }} - {{ i }}
</view>
  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

激洪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值