【原】小程序 数据绑定

表白：你不累吗，你已经在我心里笑了一整天了
讲解对象：小程序 数据绑定
作者：融水公子 rsgz
微信小程序教程

text标签
实质：相当于html里面的span标签，不会换行

<text>rsgz</text>
<text>rsgz</text>

运行结果：
rsgzrsgz

view标签
实质：就是HTML里面的div标签，是默认的块级元素，会主动换行

<view>rsgz</view>
<view>rsgz</view>
运行结果：
rsgz
rsgz

页面的wxml文件编辑

<!-- 字符串 -->
<view>{{msg}}</view>
<!-- 数字 -->
<view>{{num}}</view>
<!-- 布尔值 -->
<view>{{isGirl}}</view>
<!-- 对象类型 -->
<view>{{person}}</view>
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<!-- 属性中使用模板 -->
<view date-num="{{person.age}}">自定义属性</view>
<!-- ckeckbox -->
<view>
  <checkbox checked="{{isChecked}}"></checkbox>
</view>

页面的JS文件编辑 最主要是data里面的对象。

// pages/mime/mime.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg:"我是萧炎",
    num:120,
    isGirl:false,
    person:{
      age:20,
      height:180,
      weight:120,
      name:"高富帅"
    },
    isCkecked:false  
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

运行结果：

注意：这里的引号和大括号之间的空格是很危险的，会导致识别错误。即便这里的布尔值表示否，最后也会表示成 是

  

页面的js文件可以绑定数据，date里面写上键值对，
谢谢大家的支持！可以点击我的头像，进入我的空间浏览更多文章呢。建议大家360doc[www.360doc.com]注册一个账号登录，里面真的有很多优秀的文章，欢迎大家的到来。
---