微信小程序 | 05.条件渲染、事件绑定

1.本章概述

• 动态展示/隐藏，用wx:if
• 绑定点击事件函数用bindtap，绑定输入框内容改变事件函数用bindinput
• 绑定事件后，通过data-xxx="yyy"可将 xxx=yyy 传入函数
• 在函数中用e接收事件源对象，用e.detail获取参数

2.条件渲染

实现动态渲染，必须用wx:if

2.1.wx:if

类似VUE的v-if，属性值是一个条件表达式，记得用双引号和花括号包裹表达式

可以动态渲染，通过改变组件参数来隐藏/显示

2.2.hidden

类似VUE的v-show，属性值是条件表达式，需要用双引号和花括号包裹表达式

如果动态渲染并不是即时的（动态渲染的元素不需要跟随数值的改变马上发生变化），则尽量用hidden；但如果希望实现像上方动态图那般效果，只能用wx:if

3.绑定事件

绑定事件可分为两大类：

1. 系统定义的事件：bindtap、bindinput…
2. 自定义事件：bind:xxx(xxx是自定义的事件名),用于子组件向父组件传参

• 在js文件中定义好触发函数
• 在wxml中，通过自定义属性(bind-xxx="yyy")来传递参数
• 通过在方法中添加事件源对象e作为形参来进行取值，值存放位置可以通过console.log(e)来找寻
• 通过this.data.xxx=yyy实现对Page对象的data中属性赋值，但不会被动态渲染
• 如果属性需要被动态渲染，必须用this.setData({ })

3.1.绑定点击事件 - bindtap（不能加括号并传参）

1. 在js文件中，定义alertMe方法(pages的话定义在Page的构造函数中，组件的话定义在method中)

   

2. 在wxml中编写<button>，添加bindtap绑定触发函数，添加data-message传递自定义参数"message"

   

3. 编译，点击，查看控制台以寻找参数

   

4. 取值，赋值，重新输出

   

5. 检验效果

   

3.2.动态获取输入框的值 - bindinput

只要输入框的值发生改变，绑定的属性值就会立刻改变！需要注意是在有bindinput属性的元素中，再使用bind-xxx不会有任何效果。

1. 在js中定义getInput函数，将事件源对象e作为参数传入

   

2. 在wxml中编写<input>，为其添加bindinput属性以绑定getInput函数

   

3. 检验效果：只要输入框内容改变，就会触发getInput函数。通过e.detail获取输入框内容