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