数据绑定
mustache
语法可以用在:
1、innerHTML(类似)
2、元素的属性上
3、可以使用字面量和简单逻辑运算符
不能用在标签名和属性名上,当语法解析误解了true/false
可以使用 {{ }}解决
定义数据 (js文件中定义data数据)
page({
data:{
name:"zhangsan"
}
})
在wxml文件中进行数据绑定
<text>{{ name }}</text>
列表数据渲染
todo = [{"name":"zhangsan","age":10},{"name":"lisi","age":18}]
循环:wx:for="{{ todo }}"
使用:{{ item.name }}
注:如果全局属性中有item关键词(给被遍历的对象定义名称
循环:wx:for-item = "aaa" 使用{{ aaa.name }}
获取序号: {{ index }}
注:如果全局中有index关键词(给下标定义名称
wx:for-index="i" {{ i }}
显示隐藏
wx:if 根据一个bool
值来决定显示或隐藏
事件
点击事件
<button bindtap = “buttonTapHande(e)l”>点我</button>
page({
buttonTapHandel:function( e ){
console.dir( e ) 将对象以树状的形态打印到控制栏
}
})
阻止事件冒泡
catchtap = "innerHandel"
catch+事件名 阻止冒泡并绑定事件
事件传参
在HTML中定义参数
<button bindtap="tapHandel" data-name = "zhangsan">我是一个按钮</button>
获取参数(在js文件中
e.target
拿到点击的元素
dataset
指的是元素上所有以data-
开头的属性集合
page({
tapHandel:function(e){
console.dir(e.target.dataset)
}
})
单向数据流
实现双向数据绑定
思路:定义数据,将数据显示在界面层,当界面层的数据发生改变时,定义的数据也发生改变。
index.xml
<view class="container">
<input value="{{message}}" bindinput="inputHandle">
<text>{{message}}</text>>
</view>
index.js
page({
data:{
demo:11,
message:'zhangsan'
},
inputHandle:function(e){
this.setData({
message:e.detail.value
})
console.log(this.data)
}
})
this.setData 用来改变data
中的数据
它与直接赋值的区别在于setData
可以通知界面做出变化
直接赋值没有办法实现这一点(早期js
参考资料:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html