上一节讲到了如何简单快速创建小程序hellow world,相信大家还没忘记吧,不怕,就算忘记了,回来看看,立马又能记住。这节来讲讲小程序用什么语法来进行数据绑定的。
数据绑定有它专门的语法,叫做Mustache 语法(双大括号)将变量包起来,例如:{{myData}}。你可以不细究这个语法的意思,但你知道数据绑定通过这个语法来展示就可以了。
WXML的动态数据,均来自对应的Page的data
wxml:
<view> {{ message }} </view>
js:
Page({
data: {
message: "趣味前端"
}
})
以上就是简单的数据绑定,data的message就能绑定到wxml的{{message}}中了。
别想多了,数据绑定就是这么简单,往下看
我们再来看看其他形式的绑定:
组件属性
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
控制属性
<view wx:if="{{condition}}"> </view>
Page({
data: {
condition: true
}
})
关键字
true:boolean 类型的 true,代表真值。
false: boolean 类型的 false,代表假值。
<checkbox checked="{{false}}"> </checkbox>
三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
算数运算
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 3,
b: 4,
c: 5
}
})
view中的内容为7+5+d
逻辑判断
<view wx:if="{{length > 3}}"> </view>
字符串运算
<view>{{"你好" + name}}</view>
Page({
data:{
name: 'Mr.Zhang'
}
})
以上举例了各种形式的数据绑定的例子,记住一点,数据都是在data中,对应的变量可以显示在wxml各种各样的地方。
只要data中的数据值改变了,wxml中的内容也会相应改变。这就是数据驱动视图的方便之处,不用刷新,数据的轻轻松松的改变了。
不难,一点都不难。大家给我一个傲娇的眼神。
下一节可能讲的多点,主要是最常用的语法。跟着学,就够你用的了。
我是Mr.Zhang,更多前端教程和资讯,关注公众号,趣味前端,我们一起交流学习。