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