微信小程序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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要分享了JavaScript定時(shí)器類型總結(jié)，文章圍繞JavaScript定時(shí)器類型的相關(guān)資料展開全文詳細(xì)內(nèi)容，需要的小伙伴可以參考一下，希望對(duì)你有所幫助2021-12-12
JavaScript obfuscator 讓你的代碼看起來讓人痛苦(最新整理)
文章介紹JavaScriptObfuscator的作用及原理,通過變量替換、字符串加密、控制流平坦化等技術(shù)混淆代碼,提升安全性,同時(shí)講解其在Node.js、Webpack、Rollup、Gulp等環(huán)境的使用方法,并對(duì)比普通壓縮工具,強(qiáng)調(diào)其在防止逆向工程中的優(yōu)勢(shì),感興趣的朋友一起看看吧2025-07-07
JavaScript數(shù)組some()函數(shù)的語法、用法與實(shí)戰(zhàn)示例
JavaScript中的數(shù)組some()方法用于檢查數(shù)組中是否至少有一個(gè)元素滿足指定條件,這篇文章主要介紹了JavaScript數(shù)組some()函數(shù)的語法、用法與實(shí)戰(zhàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
js實(shí)現(xiàn)時(shí)鐘定時(shí)器
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)時(shí)鐘定時(shí)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
ES6中Class類的靜態(tài)方法實(shí)例小結(jié)
這篇文章主要介紹了ES6中Class類的靜態(tài)方法,結(jié)合實(shí)例形式簡單總結(jié)分析了ES6中class類中靜態(tài)方法的使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-10-10
微信小程序之下拉列表實(shí)現(xiàn)方法解析（附完整源碼）
這篇文章主要介紹了微信小程序之下拉列表實(shí)現(xiàn)方法解析（附完整源碼）,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
js實(shí)現(xiàn)樹形數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)的方法示例
這篇文章主要介紹了js實(shí)現(xiàn)樹形數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
瀏覽器對(duì)于我們來說，可能是最熟悉的工具了。在我們的產(chǎn)品開發(fā)過程中，經(jīng)常要考慮瀏覽器兼容問題，以適應(yīng)不同的用戶人群，同時(shí)也減少因?yàn)g覽器兼容問題所帶來的服務(wù)量。所以檢測(cè)瀏覽器的版本及類型就是很重要的一件事了，下面來一起看看用Javascript如何實(shí)現(xiàn)。2016-08-08
JavaScript對(duì)象數(shù)組排序?qū)嵗椒\析
這篇文章主要介紹了JavaScript對(duì)象數(shù)組排序?qū)嵗椒\析的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
JavaScript實(shí)現(xiàn)前端網(wǎng)頁版倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端網(wǎng)頁版倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03