小程序系列-5.WXML 模板语法

 一、数据绑定

1、在 data 中定义页面的数据

小程序系列-5.WXML 模板语法_第1张图片 动态绑定内容:

小程序系列-5.WXML 模板语法_第2张图片

 动态绑定属性:

小程序系列-5.WXML 模板语法_第3张图片

2. Mustache 语法的格式 

 小程序系列-5.WXML 模板语法_第4张图片

3. Mustache 语法的应用场景 

小程序系列-5.WXML 模板语法_第5张图片

4. 三元运算

 小程序系列-5.WXML 模板语法_第6张图片

5.算数运算 

小程序系列-5.WXML 模板语法_第7张图片

二、 事件绑定

 1. 什么是事件?

小程序系列-5.WXML 模板语法_第8张图片

2. 小程序中常用的事件 

小程序系列-5.WXML 模板语法_第9张图片

3. 事件对象的属性列表 

 小程序系列-5.WXML 模板语法_第10张图片

4. target 和 currentTarget 的区别 

小程序系列-5.WXML 模板语法_第11张图片

5. bindtap 的语法格式 

小程序系列-5.WXML 模板语法_第12张图片

6. 在事件处理函数中为 data 中的数据赋值 

小程序系列-5.WXML 模板语法_第13张图片

7. 事件传参 

小程序系列-5.WXML 模板语法_第14张图片

小程序系列-5.WXML 模板语法_第15张图片

小程序系列-5.WXML 模板语法_第16张图片

8. bindinput 的语法格式 

 小程序系列-5.WXML 模板语法_第17张图片

9. 实现文本框和 data 之间的数据同步 

实现步骤:

定义数据

渲染结构

美化样式

绑定 input

事件处理函数 

小程序系列-5.WXML 模板语法_第18张图片

小程序系列-5.WXML 模板语法_第19张图片 小程序系列-5.WXML 模板语法_第20张图片

小程序系列-5.WXML 模板语法_第21张图片

 三、条件渲染

 1. wx:if

小程序系列-5.WXML 模板语法_第22张图片 2. 结合 使用 wx:if

小程序系列-5.WXML 模板语法_第23张图片 3. hidden

小程序系列-5.WXML 模板语法_第24张图片

4. wx:if 与 hidden 的对比 

 小程序系列-5.WXML 模板语法_第25张图片

四、列表渲染 

 1. wx:for

小程序系列-5.WXML 模板语法_第26张图片 2. 手动指定索引和当前项的变量名*

 小程序系列-5.WXML 模板语法_第27张图片3. wx:key 的使用

 小程序系列-5.WXML 模板语法_第28张图片

你可能感兴趣的:(小程序,小程序)