學習的最大理由是想擺脫平庸，早一天就多一份人生的精彩；遲一天就多一天平庸的困擾。各位小伙伴，如果您：
想系統(tǒng)/深入學習某技術知識點…
一個人摸索學習很難堅持，想組團高效學習…
想寫博客但無從下手，急需寫作干貨注入能量…
熱愛寫作，愿意讓自己成為更好的人…

前言

一、WXML 模板語法——數據綁定
1、數據綁定的基本原則
2、在 data 中定義頁面的數據
3、Mustache 語法（差值表達式）的格式
4、Mustache 語法的應用場景
5、動態(tài)綁定內容
6、動態(tài)綁定屬性
7、三元運算
8、算數運算
二、WXML 模板語法-事件綁定
1、什么是事件
2、小程序中常用的事件
3、事件對象的屬性列表
4、target 和 currentTarget 的區(qū)別
5、bindtap 的語法格式
6、在事件處理函數中為 data 中的數據賦值
7、事件傳參
8、bindinput 的語法格式
9、實現文本框和 data 之間的數據同步
三、WXML 模板語法 - 事件綁定
1、wx:if
2、結合 使用 wx:if
3、hidden
4、wx:if 與 hidden 的對比
四、WXML 模板語法 - 列表渲染
1、wx:for
2、手動指定索引和當前項的變量名*
3、wx:key 的使用

一、WXML 模板語法——數據綁定

1、數據綁定的基本原則

• 在 data 中定義數據
• 在 WXML 中使用數據

2、在 data 中定義頁面的數據

在頁面對應的 .js 文件中，把數據定義到 data 對象中即可：

3、Mustache 語法（差值表達式）的格式

把data中的數據綁定到頁面中渲染，使用 Mustache 語法（雙大括號）將變量包起來即可。語法格式為：

4、Mustache 語法的應用場景

Mustache 語法的主要應用場景如下：

• 綁定內容
• 綁定屬性
• 運算（三元運算、算術運算等）

5、動態(tài)綁定內容

<view>{{info}}</view>

  data: {
    //字符串類型的數據
    info: 'init data',
    //數組類型的數據
    msgList:[{msg:`hello`},{msg:`world`}]
    
  },

6、動態(tài)綁定屬性

<image src="{{imgSrc}}"></image>

  data: {
    //字符串類型的數據
    info: 'init data',
    //數組類型的數據
    msgList:[{msg:`hello`},{msg:`world`}],
    imgSrc:'/images/1.jpeg'

  },

7、三元運算

<view>{{randomNum>=5?'隨機數字大于或等于5':'隨機數字小于5'}}</view>

  data: {
    //字符串類型的數據
    info: 'init data',
    //數組類型的數據
    msgList:[{msg:`hello`},{msg:`world`}],
    imgSrc:'/images/1.jpeg',
    randomNum:Math.random()*10 //生成10以內的隨機數

  },

8、算數運算

<view>生成100以內的隨機數：{{randomNum1*100}}</view>

  data: {
    //字符串類型的數據
    info: 'init data',
    //數組類型的數據
    msgList:[{msg:`hello`},{msg:`world`}],
    imgSrc:'/images/1.jpeg',
    randomNum:Math.random()*10, //生成10以內的隨機數
    randomNum1:Math.random().toFixed(2) //生成一個帶兩位小數的隨機數，例如0.34

  },

二、WXML 模板語法-事件綁定

1、什么是事件

事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產生的行為，反饋到邏輯層進行業(yè)務的處理

2、小程序中常用的事件

3、事件對象的屬性列表

當事件回調觸發(fā)的時候，會收到一個事件對象 event，它的詳細屬性如下表所示：

4、target 和 currentTarget 的區(qū)別

target 是觸發(fā)該事件的源頭組件，而 currentTarget 則是當前事件所綁定的組件。舉例如下：

點擊內部的按鈕時，點擊事件以冒泡的方式向外擴散，也會觸發(fā)外層 view 的 tap 事件處理函數。
此時，對于外層的 view 來說：

• e.target 指向的是觸發(fā)事件的源頭組件，因此，e.target 是內部的按鈕組件
• e.currentTarget 指向的是當前正在觸發(fā)事件的那個組件，因此，e.currentTarget 是當前的 view 組件

5、bindtap 的語法格式

在小程序中，不存在 HTML 中的 onclick 鼠標點擊事件，而是通過 tap 事件來響應用戶的觸摸行為。

• 通過 bindtap，可以為組件綁定 tap 觸摸事件，語法如下：
  
• 在頁面的 .js 文件中定義對應的事件處理函數，事件參數通過形參 event（一般簡寫成 e） 來接收：
  

6、在事件處理函數中為 data 中的數據賦值

通過調用 this.setData(dataObject) 方法，可以給頁面 data 中的數據重新賦值，示例如下：

7、事件傳參

1、小程序中的事件傳參比較特殊，不能在綁定事件的同時為事件處理函數傳遞參數。例如，下面的代碼將不能正常工作：

因為小程序會把 bindtap 的屬性值，統(tǒng)一當作事件名稱來處理，相當于要調用一個名稱為 btnHandler(123) 的事件處理函數。

2、可以為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數的名字，示例代碼如下：

最終：

• info 會被解析為參數的名字
• 數值 2 會被解析為參數的值

3、在事件處理函數中，通過 event.target.dataset.參數名 即可獲取到具體參數的值，示例代碼如下：

8、bindinput 的語法格式

在小程序中，通過 input 事件來響應文本框的輸入事件，語法格式如下：

• 通過 bindinput，可以為文本框綁定輸入事件：
  
• 在頁面的 .js 文件中定義事件處理函數：
  

9、實現文本框和 data 之間的數據同步

實現步驟：

• 定義數據
  
• 渲染結構
  
• 美化樣式
  
• 綁定 input 事件處理函數
  

三、WXML 模板語法 - 事件綁定

1. wx:if

在小程序中，使用 wx:if=“{{condition}}” 來判斷是否需要渲染該代碼塊：

也可以用 wx:elif 和 wx:else 來添加 else 判斷：

2、結合 使用 wx:if

如果要一次性控制多個組件的展示與隱藏，可以使用一個 標簽將多個組件包裝起來，并在 標簽上使用 wx:if 控制屬性，示例如下：

注意： 并不是一個組件，它只是一個包裹性質的容器，不會在頁面中做任何渲染。

3、hidden

在小程序中，直接使用 hidden=“{{ condition }}” 也能控制元素的顯示與隱藏：

4、wx:if 與 hidden 的對比

• 運行方式不同
  • wx:if 以動態(tài)創(chuàng)建和移除元素的方式，控制元素的展示與隱藏
  • hidden 以切換樣式的方式（display: none/block;），控制元素的顯示與隱藏
• 使用建議
  • 頻繁切換時，建議使用 hidden
  • 控制條件復雜時，建議使用 wx:if 搭配 wx:elif、wx:else 進行展示與隱藏的切換

四、WXML 模板語法 - 列表渲染

1、wx:for

通過 wx:for 可以根據指定的數組，循環(huán)渲染重復的組件結構，語法示例如下：

2、手動指定索引和當前項的變量名*

• 使用 wx:for-index 可以指定當前循環(huán)項的索引的變量名
• 使用 wx:for-item 可以指定當前項的變量名
  示例代碼如下：
  

3、wx:key 的使用

類似于 Vue 列表渲染中的 :key，小程序在實現列表渲染時，也建議為渲染出來的列表項指定唯一的 key 值，從而提高渲染的效率，示例代碼如下：

總結

以上就是微信小程序之WXML 模板語法之數據綁定、事件綁定、wx:if和列表渲染的相關知識點，希望對你有所幫助。
積跬步以至千里，積怠惰以至深淵。時代在這跟著你一起努力哦！文章來源地址http://www.zghlxwxcb.cn/news/detail-814115.html

到了這里，關于微信小程序之WXML 模板語法之數據綁定、事件綁定、wx:if和列表渲染的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！