10.uni-app中的数据绑定

uni-app中的数据绑定

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

export default{

data() {

return{

msg:'hello-uni'

   }

  }

}

插值表达式的使用

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

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

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

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

基本运算

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

v-bind动态绑定属性

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

exportdefault{

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进行循环

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