uni-app的数据绑定&事件

数据绑定

• 在页面中定义数据，直接在data中定义数据即可

data(){
			return{
				msg:'hello',
				flag:false,
				imgURL:'http://destiny001.gitee.io/image/monkey_02.jpg',
				arr:[
					{
						name:'宋小宝',
						age:20,
						id:1
					},
					{
						name:'刘能',
						age:21,
						id:2
					},
					{
						name:'奥特曼',
						age:23,
						id:3
					}
				]
			}
		},

插值表达式

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

<view>
			{{msg}} 里面可以可以使用简单的三元运算符和简单的表达式
</view>

插值表达式里面运用三目运算符

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

插值表达式基本运算

<view>
	{{1+'你好'}}
</view>
<view>
	{{'你好'+'世界'}}
</view>
<view>
	{{1+1}}
</view>

v-bind动态绑定属性

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

• 利用v-bind渲染，v-bind可以简写为：

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

v-for的使用

• 迭代数组，item表示数组每一项，indnex表示索引值

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

事件

• 事件函数定义在methods中

methods:{
			clickHandle(num,e){
				console.log('点到我了',num,e)
			}
		}

事件绑定

• 在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@
• 不传参数默认是一个事件对象，传参后是参数,加了通过两个参数的方法都可以拿到
• 只想拿事件对象

<button type="primary" @click="clickHandle">按钮</button>

methods:{
			clickHandle(e){
				console.log('点到我了'，e)
			}
		}

• 想拿参数

<button type="primary" @click="clickHandle(20)">按钮</button>

methods:{
			clickHandle(num){
				console.log('点到我了',num)
			}
		}

• 既想拿到参数也想拿到对象

<button type="primary" @click="clickHandle(20,$event)">按钮</button>