下面，粗略的介紹一下微信小程序的條件渲染、列表渲染、數(shù)據(jù)綁定等，詳細(xì)的內(nèi)容大家可以去看微信小程序的API,在此只做簡(jiǎn)單描述，希望能幫助到大家

條件渲染

<!--wxml--> <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA </view>// page.js Page({data: {view: 'MINA'} })

?

?

block wx:if

block和template差不多，在控制臺(tái)不可見(jiàn)標(biāo)簽

因?yàn)?span id="ozvdkddzhkzd" class="Apple-converted-space">?wx:if?是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上。如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用一個(gè)?<block/>?標(biāo)簽將多個(gè)組件包裝起來(lái)，并在上邊使用?wx:if?控制屬性。

<block wx:if="{{true}}"><view> view1 </view> <view> view2 </view> </block>

注意：?<block/>?并不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會(huì)在頁(yè)面中做任何渲染，只接受控制屬性。

列表渲染

<!--wxml-->1.<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>//自定義數(shù)組循環(huán)<view wx:for="{{array}}"> {{item}} </view>// page.js Page({data: {zero：6，array: [1, 2, 3, 4, 5]} })
2.此處的wx:for-item='newItem'可以不用相當(dāng)于把item賦給newItem， 不寫時(shí)下面的newItem.title換成item.title。此處的wx:for-index='id'其實(shí)就是每一個(gè)item的索引 <view wx:for="{{newList}}" wx:for-item='newItem' wx:for-index='id' wx:key='{{id}}'> <view>{{id+1}}.{{newItem.title}}</view> <view>{{newItem.content}}</view> </view> ?

?

數(shù)據(jù)綁定

<!--wxml--> <view> {{message}} </view>// page.js Page({data: {message: 'Hello MINA!'} })

?

對(duì)象解構(gòu)：

模板：

此處的template是虛擬的標(biāo)簽，在控制臺(tái)的標(biāo)簽元素是看不到的，所以向該標(biāo)簽 內(nèi)寫內(nèi)容是無(wú)法顯示的只能通過(guò)如下方法用is調(diào)用 1.1<!--wxml--><template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view></template>//表示控制以上name=staffName下的view的視圖，其中data調(diào)用對(duì)象時(shí)用三個(gè)點(diǎn)表示<template is="staffName" data="{{...staffA}}"></template> <template is="staffName" data="{{...staffB}}"></template> <template is="staffName" data="{{...staffC}}"></template>// page.js Page({data: {staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}} })

?

?

1.2//is 屬性可以使用 Mustache 語(yǔ)法，來(lái)動(dòng)態(tài)決定具體需要渲染哪個(gè)模板：

<template name="odd"><view> odd </view> </template> <template name="even"><view> even </view> </template><block wx:for="{{[1, 2, 3, 4, 5]}}"><template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/> </block>

?

? 2. <templateis="objectCombine"data="{{for: a, bar: b}}"></template> Page({data: {a: 1,b: 2 } })

最終組合成的對(duì)象是?{for: 1, bar: 2}

3.?如果對(duì)象的 key 和 value 相同，也可以間接地表達(dá)。

<template is="objectCombine" data="{{foo, bar}}"></template> Page({data: {foo: 'my-foo',bar: 'my-bar' } })

最終組合成的對(duì)象是?{foo: 'my-foo', bar:'my-bar'}

轉(zhuǎn)載于:https://www.cnblogs.com/Dark-fire-liehuo/p/9593406.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序的页面渲染（if/for）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。