微信小程序開發,視圖層數據綁定與條件渲染說明

2018/4/25 17:07:17
摘要: 在開發微信小程序的過程中,視圖層的數據綁定有幾種情況需要注意,在進行條件渲染的時候,也要先了解一下參數屬性

在開發微信小程序的過程中,視圖層的數據綁定有幾種情況需要注意,在進行條件渲染的時候,也要先了解一下參數屬性,針對這兩個方面的要求,小編就整理了一下視圖層的數據綁定與條件渲染的說明文檔,具體內容如下。

一、數據綁定說明

1、普通綁定

<view>{{name}}</view>

2、組件屬性綁定

組件屬性的綁定,必須使用引號,在js改變index值的時,頁面會自動刷新最新值。

<view id="item-{{index}}"></view>

3、控制屬性綁定

  控制屬性的綁定即屬性值是需要通過滿足一定條件達到目的,此外,它還可以是條件表達式或者運算表達式、多級條件判斷。示例如下:

(1)屬性滿足一定條件來達到目的:<view wx:if="{{condition}}"></view>

(2)條件表達式或運算表達式:<view hidden="{{flag ? true : false}}"></view>

(3)多級條件判斷:if ... elif ... else

4、<block>塊標簽的使用

使用<block>塊標簽后,可以使用條件判斷從而控制多個組件,不過<block>塊標簽只會起到分組作用,并不會被真的渲染出來。

5、使用條件來控制view時,與hidden屬性的比較

(1)view的條件判斷,會在條件中的值發生變化的時先銷毀原先的,然后在滿足條件的時候進行重新渲染和銷毀。

(2)hidden屬性控制view的顯示和隱藏,這個屬性的組件始終會被渲染,不過可以在需要的時候控制它的隱藏和顯示。

(3)當開發者在需要頻繁切換的情況下,建議用hidden屬性控制,而如果在綁定的數據基本不變的情況下,建議使用wx:if條件來控制。

二、列表渲染說明

  1、列表渲染wx:for:可以同時生成多個元素

  2、參數屬性說明

 (1)wx:key="unique...":指定組件的唯一標識,列表發生變化需要保持自身的狀態和特征不發生變化,并且能在重新渲染的時候,重新排序。

 (2)wx:key="*this":此參數的功能屬性同上,不同的是,這個參數要求項目中的item本身是唯一的,即需要用到的屬性值是唯一的。

 (3)wx:for-index="index":指定循環的下標變量名,默認:index。

 (4)wx:for-item="item": 指定當前項變量名,默認:item。

聲明:文章"微信小程序開發,視圖層數據綁定與條件渲染說明"為互誠科技—微信小程序開發公司的原創文章,轉載請注明出處,謝謝合作!
標簽:小程序開發文檔
電話咨詢:18011971195(黃先生)
在線留言:
微信掃碼,關注我們
相關文章
  • 小程序入駐商城系統開發,踏入電商領域第一步

    在電子商務飛速的時代,電商不再是趨向三國鼎立格局,而是各種平臺各自發展卻又暗自較勁。

  • 企業著手微信小程序開發運營的前景如何?

    微信小程序的開發運營,其本身就是立足于微信這個平臺的基礎上來談論公司企業乃至個人運營小程序的前景

  • 開發的微信小程序線下場景原來是這么玩的

    我們都在說,小程序連接了線上與線下場景,并且主要以為線下場景服務而生,但是我們卻沒有一個明確的概念,來解釋一下小程序的線下場景是怎么玩的,微信小程序開發又能在什么場景下實現什么功能?

  • 廣州企業微信開發后的營銷信息推送誤區

    企業開發微信后就需要去進行運營,利用運營去做產品營銷,來帶動企業的發展。

  • 汽車行業福利之“微信我的車”小程序上線

    微信小程序的開發與上線,就是為了更好地服務微信用戶,所以微信官方也必須要均衡地考慮到更多的行業特點,根據這些特色去提供相應的服務。例如汽車行業,由汽車的制作、售賣與使用而衍生出來的其他服務需求,就是小程序可以提供的服務方向。而微信官方正式從這些方向去出發,上線了“微信我的車“小程序,為汽車服務行業帶來福音。

  • 精準營銷+移動端+O2O,微信小程序的發展空間

    營銷要取得很好的效果,講究的是精準營銷,將營銷的效果最大化地轉化成現實利益。結合這個精準營銷加上手機移動端的特點以及O2O連接線上線下的商業模式,我們就可以來討論微信小程序在未來的發展空間到底有多大,才能讓企業商家、個人組織不斷地去觸及與開發小程序。

上海快三走势图上海快3形态走势