微信小程序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修改成strwx: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 使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要分享了JavaScript定时器类型总结，文章围绕JavaScript定时器类型的相关资料展开全文详细内容，需要的小伙伴可以参考一下，希望对你有所帮助2021-12-12
JavaScript obfuscator 让你的代码看起来让人痛苦(最新整理)
文章介绍JavaScriptObfuscator的作用及原理,通过变量替换、字符串加密、控制流平坦化等技术混淆代码,提升安全性,同时讲解其在Node.js、Webpack、Rollup、Gulp等环境的使用方法,并对比普通压缩工具,强调其在防止逆向工程中的优势,感兴趣的朋友一起看看吧2025-07-07
JavaScript数组some()函数的语法、用法与实战示例
JavaScript中的数组some()方法用于检查数组中是否至少有一个元素满足指定条件,这篇文章主要介绍了JavaScript数组some()函数的语法、用法与实战的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-03-03
这篇文章主要为大家详细介绍了js实现时钟定时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了ES6中Class类的静态方法,结合实例形式简单总结分析了ES6中class类中静态方法的使用方法与相关注意事项,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了微信小程序之下拉列表实现方法解析（附完整源码）,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了js实现树形数据转成扁平数据的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
浏览器对于我们来说，可能是最熟悉的工具了。在我们的产品开发过程中，经常要考虑浏览器兼容问题，以适应不同的用户人群，同时也减少因浏览器兼容问题所带来的服务量。所以检测浏览器的版本及类型就是很重要的一件事了，下面来一起看看用Javascript如何实现。2016-08-08
这篇文章主要介绍了JavaScript对象数组排序实例方法浅析的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
这篇文章主要为大家详细介绍了JavaScript实现前端网页版倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
最新评论