05-uni-app中的数据绑定

在页面中需要定义数据，和我们之前的vue一摸一样，直接在data中定义数据即可

export default {
  data () {
    return {
      msg: 'hello-uni'
    }
  }
}

插值表达式的使用

• 利用插值表达式渲染基本数据

  <view>{{msg}}</view>
  

• 在插值表达式中使用三元运算

  <view>{{ flag ? '我是真的':'我是假的' }}</view>
  

• 基本运算

  <view>{{1+1}}</view>
  

v-bind动态绑定属性

在data中定义了一张图片，我们希望把这张图片渲染到页面上

export default {
  data () {
    return {
      img: 'http://destiny001.gitee.io/image/monkey_02.jpg'
    }
  }
}

利用v-bind进行渲染

<image v-bind:src="img"></image>

还可以缩写成:

<image :src="img"></image>

v-for的使用

data中定以一个数组，最终将数组渲染到页面上

data () {
  return {
    arr: [
      { name: '刘能', age: 29 },
      { name: '赵四', age: 39 },
      { name: '宋小宝', age: 49 },
      { name: '小沈阳', age: 59 }
    ]
  }
}

利用v-for进行循环

<view v-for="(item,i) in arr" :key="i">名字：{{item.name}}---年龄：{{item.age}}</view>