微信小程序wx:for 的使用及wx:key綁定兩種方式
更新時間：2023年12月01日 10:54:12 作者：weixin_43364458
wx:for是微信小程序中的一個列表渲染指令,用于循環(huán)渲染一個數(shù)組或對象中的數(shù)據,它類似于JavaScript中的for循環(huán),可以根據數(shù)據的長度自動渲染相應的列表項,本文給大家介紹微信小程序wx:for 的使用及wx:key綁定兩種方式,感興趣的朋友一起看看吧
概述
- wx:for基本使用
- wx:for-item和wx:for-index重新命名item和index
- wx:key兩種綁定方式以及注意事項
wx:for基本使用
業(yè)務層數(shù)據
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實現(xiàn)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渲染存儲對象的數(shù)組使用時候如何綁定wx:key
業(yè)務層數(shù)據
Page({
data: {
books:[
{id:'001',name:'你不知道的JavaScript'},
{id:'002',name:'JavaScript高級程序設計'}
]
}
})視圖層綁定數(shù)據
以下不要直接使用
wx:key="item"或者wx:key="*this"因為此時循環(huán)遍歷的每一項數(shù)據都是鍵值對的對象。wx:key="{}"解析變量之后轉換字符串底層原理就是({}).toString()最終渲染成[object Object]無法實現(xiàn)優(yōu)化。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 使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了Webpack如何引入bootstrap的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
bootstrap table實現(xiàn)橫向合并與縱向合并
這篇文章主要為大家詳細介紹了bootstrap table實現(xiàn)橫向合并與縱向合并，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家分享了7個去偽存真的JavaScript面試題，希望本文可以幫助大家比較順利的通過面試，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要為大家詳細介紹了swiper Scrollbar滾動條組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了使用js判斷TextBox控件值改變然后出發(fā)事件。需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
微信小程序使用this.setData()遇到的問題及解決方案詳解
this.setData估計是小程序中最經常用到的一個方法,但是要注意其實他是有限制的,忽略這些限制的話,會導致數(shù)據無法更新,下面這篇文章主要給大家介紹了關于微信小程序使用this.setData()遇到的問題及解決方案,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了微信小程序上傳圖片實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
本篇文章主要是對js菜單點擊顯示或隱藏效果的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
JavaScript中實現(xiàn)new的兩種方式引發(fā)的探究
眾所周知JS中new的作用是通過構造函數(shù)來創(chuàng)建一個實例對象，這篇文章主要給大家介紹了關于JavaScript中實現(xiàn)new的兩種方式引發(fā)的相關資料，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
Object.assign方法用于對象的合并，將源對象（ source ）的所有可枚舉屬性，復制到目標對象（ target ），下面這篇文章主要給大家介紹了關于ES6中新增的Object.assign()方法的相關資料，需要的朋友可以參考下。2017-09-09