微信小程序04 数据绑定

一、数据绑定的基本原则

1、在data中定义数据
即在页面对应的.js文件中，把数据定义到data对象中即可

2、在 wxml 中使用数据

把data中的数据绑定到页面中渲染，使用Mustache（相当于插值表达式）将变量包起来即可，语法格式为：

<view>{{要绑定的数据名称}}view>

举例：
在js文件中的data中定义数据：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    info:'hello world'
  }
}

在wxml文件中将数据渲染到页面上

<view>{{info}}view>

结果如下：

二、插值表达式进行数据绑定

（一）动态绑定内容

将上述绑定数据方法中，data中定义的数据改成自定义字符串即可

（二）动态绑定属性

页面数据如下：

Page({
	data:{
		imgSrc:'照片url'
	}
})

页面结构如下：

<image src="{{}imgSrc}">image>

注：在vue中动态绑定属性使用的是 v-bind

（三）三元运算

直接实例：

页面数据：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    info:'hello world',
    randomNum1: Math.random()*10
  }
}

页面结构如下：

<view>{{randomNum1 >=5 ?'数字大于或等于5' : '数字小于5'}}view>

结果会在页面上打印出来：

在开发工具下方的调试器中打开AppData，将Mode改成Code,可以看到随机生成数的具体值。

（四）算术运算

实例：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    info:'hello world',
    randomNum1: Math.random()*10,
    randomNum2: Math.random().toFixed(2)
  }
}

页面结构：

<view>{{randomNum2 * 100}}view>

结果：