WXML模版语法
一、数据绑定
1、数据绑定的基本原则
(1)在data中定义数据
(2)在WXML中使用数据
2、在data中定义页面的数据

3、Mustache语法的格式(双大括号)

4、Mustache语法的应用场景
(1)绑定内容
(2)绑定属性
(3)运算(三元运算、算术运算等)
5、动态绑定内容


6、动态绑定属性
7、三元运算
8、算术运算


二、WXML模版语法-事件绑定
1、小程序中常用的事件

2、事件对象的属性列表

3、target和currentTarget的区别

4、bindtap 的语法格式 (相当于鼠标点击事件)


5、在时间处理函数为data中的数据赋值
通过调用this.setData(dataObject)方法,可以给页面data中的数据重新赋值

6、事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数

7、事件传参(正确)
可以为组件提供data-*自定义属性传参,其中*代表的是传参的名字

info会被解析为参数的名
数值2会被解析为参数的值
7、事件传参
在事件处理函数中,通过event.target.dataset.参数名,即可获取到具体参数的值

8、bindinput的语法格式


9、实现文本框和data之间的数据同步
实现步骤:
(1)渲染数据
(2)渲染结构
(3)美化样式
(4)绑定input事件处理函数




三、条件渲染
1、wx:if

2、结合<block>使用wx:if
如果要一次性控制多个组件的展示和隐藏,可以使用一个<block></block>标签将多个组件包装并在<block>标签上使用wx:if控制属性

注意:<block>并不是一个组件,只是一个包裹性质的容器,不会在页面中做任何渲染
3、hidden
直接使用也能控制元素的显示与隐藏

4、wx:if与hidden的对比
(1)运行方式不同
wx:if以动态创建和移除元素的方式,控制元素的展示与隐藏
hidden以切换样式的方式(display:none/block),控制元素的显示与隐藏