微信小程序开发之六 —— 数据绑定与列表渲染

学习前后

上一篇：微信小程序开发之五 —— 体验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%"
  }