微信小程序的数据绑定

数据绑定

代码变更涉及的文件有：

1. pages/index/index.wxml
2. pages/index/index.js

pages/index/index.wxml

<view class="container">
  <view class="userInfo">
    <image src="/static/images/puppy.jpg" class="avatar">image>
    <view class="nickname">{{nickname}}view>
  view>
  <view class="btnBox">
    <text class="btn">hello worldtext>
  view>
view>

pages/index/index.js

// index.js
Page({
  data:{
    nickname:"夏天的风"
  },
  onLoad(){
    setTimeout(() => {
      this.setData({
        nickname:"冬天的雪"
      })
    },3000)
  }
})

小结

1. 数据绑定，wxml中用 {{}} 将变量包起来即可，如{{nickname}}。
2. pages/index/index.wxml中的动态数据nickname来自于pages/index/index.js的
   data 。data是页面第一次渲染使用的初始数据。
3. js中访问绑定的数据字段nickname：this.data.nickname。
4. js中修改绑定的数据字段nickname：this.setData({nickname:'冬天的雪'})。

相关链接

新建微信小程序项目