本文共 2891 字，大约阅读时间需要 9 分钟。

此文为uni-app总结笔记（7）— 数据绑定 以及 v-bind，v-for，v-on

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

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

插值表达式的使用

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

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

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

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

• 基本运算

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

数据绑定示例代码：

	<template>	<view>		<view>数据绑定的学习</view>		<view>{   {   msg}}</view>		<view>{   {   "你好呀"+"世界"}}</view>		<view>{   {   1+1}}</view>		<view>{   {   flag?"这是真的，我是true":"这是假的，我是false"}}</view>	</view></template><script>	export default {   		data() {   			return {   				msg: 'hello',				flag: true,			}		},	}</script><style></style>

示例效果图：

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>

uni中的事件

事件绑定

在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@

<button @click="tapHandle">点我啊</button>

事件函数定义在methods中

methods: {     tapHandle () {       console.log('真的点我了')  }}

事件传参

• 默认如果没有传递参数，事件函数第一个形参为事件对象

  // template<button @click="tapHandle">点我啊</button>// scriptmethods: {  tapHandle (e) {    console.log(e)  }}

• 如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据

  // template<button @click="tapHandle(1)">点我啊</button>// scriptmethods: {  tapHandle (num) {    console.log(num)  }}

• 如果获取事件对象也想传递参数

  // template<button @click="tapHandle(1,$event)">点我啊</button>// scriptmethods: {  tapHandle (num,e) {    console.log(num,e)  }}

所有数据绑定以及 v-bind，v-for的示例代码：

<template>	<view>		<view>数据绑定的学习</view>		<view>{  {msg}}</view>		<view>{  {"你好呀"+"潼潼"}}</view>		<view>{  {1+1}}</view>		<view>{  {flag?"这是真的，我是true":"这是假的，我是false"}}</view>		<image :src="imgUrl"></image>		<view v-for="(item,index) in arr" :key="item.id">			序号：{  {index}},			名字：{  {item.name}},			年龄：{  {item.age}}		</view>		<button type="primary" v-on:click="clickHandle(20,$event)">按钮</button>	</view></template><script>	export default {    		data() {    			return {    				msg: 'hello',				flag: true,				imgUrl: "http://photo.weitianxia.cn/uploadhtml5_2021-03-31_6063ebd1cab59.jpg",				arr: [					{    						name: "潼潼",						age: 2,						id: 1					},					{    						name: "小何",						age: 30,						id: 2					},					{    						name: "小可",						age: 29,						id: 3					},					{    						name: "小王",						age: 30,						id: 4					},					{    						name: "端哥",						age: 20,						id: 5					}				]			}		},		methods: {    			clickHandle(num,e) {    				 console.log("点击我了",num,e)			}		}	}</script><style></style>

所有数据绑定以及 v-bind，v-for，v-on事件绑定和事件传参的示例图：

好了，今天就这样啦~~