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

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(黃先生)
在線留言:
微信掃碼,關注我們
相關文章
  • 微信小程序用什么開發

    針對微信小程序的開發問題,官網向廣大開發者提供了官方的開發教程、示例Demo以及開發工具。開發者可以根據官方開發教程與示例

  • 微信小程序開發目錄結構介紹

    在進行微信小程序開發的時候,有一個固定的默認的目錄結構,該結構中包含一個app(主體部分)和多個page(頁面),其中分別有四種文件類型

  • 廣州微信小程序開發,助力企業攫取線上流量,進入線下藍海

    微信小程序的性質逐漸朝O2O模式靠近,原本僅以線下場景服務為主的定位,在不斷的調整過后找到了最合適的開發模式,那就是用線上線下結合來運營

  • 跨境電商能通過微信小程序開發做什么

    就目前的情況來看,跨境電商在微信小程序開發這一方面還沒有多少涉獵,主要的原因不是說不想去涉及,而是很多跨境電商還不知道小程序對于他們來說可以做什么,又能給他們帶來什么樣的效果,所以就只能暫時以觀望的姿態來看待這個微信新事物,迄待時機成熟再去發展。而關于跨境電商能通過小程序做什么這個問題,小編有一點見解:

  • 微信小程序開發公司再次搞事情,新能力說來就來

    微信官方又通過微信公開課向外界宣布,他們又在小程序的開發上搞事情了,各種新能力說來就來,說開放就

  • 微信小程序釋放廣告變現能力,不再只是工具

    雖然微信小程序剛開始出現時候的定位是工具型的產品,但是在探索開發與技術創新、市場需求增加之后,微信小程序的功能越發豐富、

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