学习前后
上一篇:微信小程序开发之五 —— 体验WeUI
下一篇:微信小程序开发之七 —— Flex、Grid与List布局
数据分离
既然是数据绑定,所以数据跟场景应该不在一处才可以。
未分离前我们是这样写wxml的:
<view>小明,您已登录,欢迎</view>
这个是直接写法,而数据分离绑定的写法是这样
.wxml:
<view>{
{
username}},您已登录,欢迎</view>
在.js的data里面添加这样一段代码:
data:{
username:"小明"
},
如果运行一下就可以发现两者的结果是一样,我们只需要修改.js文件里面data的值即可更改username的值,在wxml文件里,只需要用双大括号{ {}}把变量名包起来,就能把data里面的变量给渲染出来。
数据类型
json有以下几种数据类型
- 字符串String,用于存储和处理文本;
- 数字Number,就是我们所认识的阿拉伯数字;
- 布尔值Boolean,就是true和false;
- 对象Object,之前说过,对象由大括号{}分隔,在大括号{}内部,对象内容是按键值对的形式存储
- 数组Array,数组由中括号[ ]来分割;
组件属性数据绑定
我们还可以将组件的class,id,style,mode等属性值分离出来进行绑定。如
.wxml:
<navigator id="item-{
{id}}" class="{
{itemclass}}" url="{
{itemurl}}" >
<image style="width: {
{imagewidth}}" mode="{
{imagemode}}" src="{
{imagesrc}}"></image>
</navigator>
.js
data: {
username: "小明",
id: 233,
itemurl: "/pages/first/imshow/imshow",
itemclass: "event-item",
imagesrc: "https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg",
imagemode: "widthFix",
imagewidth: "100%"
}