脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序wx:for 使用

微信小程序wx:for 的使用及wx:key绑定两种方式

 更新时间：2023年12月01日 10:54:12   作者：weixin_43364458  
wx:for是微信小程序中的一个列表渲染指令,用于循环渲染一个数组或对象中的数据,它类似于JavaScript中的for循环,可以根据数据的长度自动渲染相应的列表项,本文给大家介绍微信小程序wx:for 的使用及wx:key绑定两种方式,感兴趣的朋友一起看看吧

概述

  • wx:for基本使用
  • wx:for-item和wx:for-index重新命名item和index
  • wx:key两种绑定方式以及注意事项

wx:for基本使用

业务层数据

Page({
  data: {
    name: 'Leung',
  }
})

视图层
wx:for遍历时候每一项名称为item每一项索引名称为index

<view>
  <block wx:for="{{name}}" wx:key="item">
    <text>字符:{{item}}</text>
    <text>索引:{{index}}</text>
  </block>
</view>

wx:for-item和wx:for-index实现item和index重命名

wx:for-item="str"将原来名称item修改成str
wx:for-index="i将原来索引名称index修改成i

<view>
  <block wx:for="{{name}}" wx:key="str" wx:for-item="str" wx:for-index="i">
    <text>字符:{{str}}</text>
    <text>索引:{{i}}</text>
  </block>
</view>

wx:key绑定两种方式

方式一:item
方式二:*this 这个*this默认情况就是item

wx:for渲染存储对象的数组使用时候如何绑定wx:key

业务层数据

Page({
  data: {
    books:[
      {id:'001',name:'你不知道的JavaScript'},
      {id:'002',name:'JavaScript高级程序设计'}
    ]
  }
})

视图层绑定数据

以下不要直接使用wx:key="item"或者wx:key="*this"因为此时循环遍历的每一项数据都是键值对的对象。wx:key="{}"解析变量之后转换字符串底层原理就是({}).toString()最终渲染成[object Object]无法实现优化。wx:for="books"遍历时候自动解析对象每一个属性,可以直接wx:key="id"

<view>
  <block wx:for="{{books}}" wx:key="id" wx:for-item="book">
    <view>
      {{book.name}}
    </view>
  </block>
</view>

到此这篇关于微信小程序wx:for 的使用以及wx:key绑定的文章就介绍到这了,更多相关微信小程序wx:for 使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论