uni-app入门:WXML数据绑定

     1.简单数据绑定
     2.组件属性数据绑定
     3.运算绑定
         3.1三元运算符
         3.2算数运算
         3.3字符串拼接运算
         3.4逻辑判断运算

正文

    WXML全称：wexin markup language,微信标签语言，可以理解为web中的html，今天来讲一下数据绑定，通过几个小案例掌握基本的使用，以下均以index页面进行讲解。
    一般是在.js文件中进行数据设置，所有的数据均在page对象中的data属性中进行设置，key-value形式进行设置，其中value可以是字符串、对象、集合。wxml中进行数据展示，其中使用{{}}差值表达式进行获取数据信息。
    

    index.js中设置数据信息：

Page({
  data: {
    keyInfo: 'hello uni-app!'
  }
})
1
2
3
4
5

index.wxml中获取数据信息：

<view>{{keyInfo}}</view>
1

微信开发者工具中保存之后左侧模拟器中显示如下：

另外也支持对象.属性或是集合指定元素取值。示例如下:
index.js中：

Page({
  data: {
    student:{
      name:'jack'
    },
    toy:[12,14,15]
  }
})
1
2
3
4
5
6
7
8

index.wxml中：

<view>学生姓名：{{student.name}},拥有玩具的个数为：{{toy[1]}}</view>
1

展示如下：

    

    注意组件属性中获取值时需要使用双引号，以给图片设置图片地址为例说明: index.js中设置图片路径：

Page({
  data: {
   imgUrl: 'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF'
  }
})
1
2
3
4
5

index.wxml中设置图片组件的路径属性:

<image src="{{imgUrl}}" ></image>
1

展示内容如下：

    

    运算时均在{{}}中进行，常见的运算有下面几种：
    
    可以直接在{{}}中进行三元运算。举例说明：
判断随机数大于5还是小于5

index.js中:
Page({
  data: {
   imgUrl: 'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF',
   randNum: Math.random() * 10
  }
})
1
2
3
4
5
6
7

index.wxml中：

<image src="{{imgUrl}}" ></image>
<view>随机数：{{randNum}}，{{randNum > 5 ? '大于5' : '小于5'}}</view>
1
2

注意:{{}}中的文字部分内容需要是字符串
展示内容如下：

    

    data中定义的数据需要从{{}}中进行运算
初始化两位小数的随机数，页面上进行加法运算。
index.js中:

Page({
  data: {
   randNum: Math.random()* 10
  }
})
1
2
3
4
5

index.wxml中:

<view>随机数：{{randNum}},加3之后：{{randNum+3}}</view>
1

展示内容如下:

    

    和算数运算符相同，需要从{{}}中进行拼接，注意字符串需要使用单引号。
index.js：

Page({
  data: {
   msg: 'world'
  }
})
1
2
3
4
5

index.wxml:

<view>{{'hello '+msg}}</view>
1

展示内容如下：

    

    根据showMsg状态进行动态显示
index.js中:

Page({
  data: {
    showMsg: false
  }
})
1
2
3
4
5

index.wxml中:

<view wx:if="{{showMsg}}">showMsg为true时显示</view>
<view wx:if="{{!showMsg}}">showMsg为false时显示</view>
1
2

展示内容如下：