微信小程序頁(yè)面渲染實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序頁(yè)面渲染實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
條件渲染：wx:if, wx:elif, wx:else
<view wx:if="{{list.length > 5}}" >1</view>
<view wx:elif="{{list.length > 2}}">2</view>
<view wx:else>3</view>
由于wx:if是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上，如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用<block></block>標(biāo)簽將多個(gè)組件包裝起來(lái)，并在上邊使用wx:if 控制屬性，
<block>
<view wx:if="{{list.length > 5}}" >1</view>
<view wx:elif="{{list.length > 2}}">2</view>
<view wx:else>3</view>
</block>
blcok 是一個(gè)包裝元素，不會(huì)在頁(yè)面做任何渲染。
hidhen：
在小程序中，hidden = "{{condition}}" 也能控制元素的顯示和隱藏。為true隱藏，為false顯示
<view hidden = "{{condition}}" >123</view>
列表渲染： wx:for
如果沒(méi)有指定參數(shù), 默認(rèn)索引是index, 值是item
<view wx:for="{{userList}}" wx:key="index">索引是： {{index}}, 值是： {{item}}</view>
data: {
userList :['zhangsan', "lisi", 'wnagwu']
}
手動(dòng)指定索引和當(dāng)前項(xiàng)的變量名：
<view wx:for="{{userList}}" wx:key="index" wx:for-index="i" wx:for-item="it">
索引是： {{i}}, 值是： {{it}}
</view>
data: {
userList :['zhangsan', "lisi", 'wnagwu']
}
block wx:for 列表渲染
<block wx:for="{{userList}}" wx:key="index" wx:for-index="i" wx:for-item="it">
<view>索引是： {{i}}, 值是： {{it}}</view>
</block>
key 在列表循環(huán)中的作用：
如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新的項(xiàng)目添加到列表中，并且希望列表中的項(xiàng)目保持自己的特征和狀態(tài)（如<input />）中輸入內(nèi)容，<checkbox/>的選中狀態(tài)，徐奧使用 wx:key來(lái)指定列表中項(xiàng)目的唯一標(biāo)識(shí)符。
當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有key的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身狀態(tài)，并且提高列表渲染時(shí)的效率。
key值的注意點(diǎn)：
key值必須具有唯一行，且不能動(dòng)態(tài)改變。
key的值必須是數(shù)字或字符串
保留關(guān)鍵子*this代表在for循環(huán)中的item本身，它也可以充當(dāng)key值，但是有以下限制，需要item本身是一個(gè)唯一的字符串或數(shù)字。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決Layui當(dāng)中的導(dǎo)航條動(dòng)態(tài)添加后渲染失敗的問(wèn)題
今天小編就為大家分享一篇解決Layui當(dāng)中的導(dǎo)航條動(dòng)態(tài)添加后渲染失敗的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
利用Angularjs和Bootstrap前端開發(fā)案例實(shí)戰(zhàn)
這篇文章主要為大家介紹了利用Angularjs和Bootstrap前端開發(fā)案例實(shí)戰(zhàn)，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript實(shí)現(xiàn)焦點(diǎn)進(jìn)入文本框內(nèi)關(guān)閉輸入法的核心代碼
這篇文章給大家分享js實(shí)現(xiàn)焦點(diǎn)進(jìn)入文本框內(nèi)關(guān)閉輸入法，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09
javascript使用eval或者new Function進(jìn)行語(yǔ)法檢查
使用代碼來(lái)實(shí)現(xiàn)分析代碼的語(yǔ)法，這是一件極其痛苦的事情。簡(jiǎn)單的解決辦法是：使用腳本引擎自己的語(yǔ)法檢查，比方說(shuō)eval( ) 或者new Function( )。2010-10-10
這篇文章主要介紹了三種帶箭頭提示框總結(jié)實(shí)例 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
在使用JavaScript中的Date對(duì)象時(shí)，有一個(gè)常用的操作就是輸出。但Date對(duì)象自帶的toString()方法輸出的格式并不能滿足用戶多樣化的需求。我在想，是不是可以將C#中DateTime.ToString(string format)方法的形式引入到JavaScript中呢？2010-03-03
HTML頁(yè)面定時(shí)跳轉(zhuǎn)方法解析（2種任選）
本文主要對(duì)HTML頁(yè)面定時(shí)跳轉(zhuǎn)進(jìn)行方法介紹：1、meta refresh 實(shí)現(xiàn)。2、JavaScript 實(shí)現(xiàn)。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
這篇文章主要介紹了JS數(shù)組扁平化(flat)方法總結(jié)詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
Webpack中l(wèi)oader打包各種文件的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Webpack中l(wèi)oader打包各種文件的相關(guān)資料，其中包括處理css文件、less文件、scss文件、url地址以及ES6高級(jí)語(yǔ)法的方法，需要的朋友可以參考下2019-09-09
Boostrap模態(tài)窗口的學(xué)習(xí)小結(jié)
Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。它可以用來(lái)創(chuàng)建模態(tài)窗口豐富用戶體驗(yàn)，或者為用戶添加實(shí)用功能。您可以在 Modals（模態(tài)框）中使用 Popover（彈出框）和 Tooltip（工具提示插件）2016-03-03