uniapp中的数据绑定

一.插值表达式{{msg}}

在export default的data()里边给一个变量 

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

</template>

<script>
    export default{
       data(){
           return{
              msg:"hello"
           }
       }
    }
</script>

插值表达式中还可以进行字符串的拼接

<template>
    <view>
        {{'你好'+“世界”}}
    </view>
</template>

插值表达式中还可以进行逻辑运算

<template>
    <view>
        {{flag?'这是真的'：‘这是假的’}}
    </view>

</template>

<script>
    export default{
        data(){
            flag:true
        }
    }
</script>

二.v-bind和v-for

1.v-bind会将普通的字符串解析为表达式，v-bind也可以省略只写引号。

例如

<template>
    <view>
       <image v-bind:src="imgUrl"/>
    </view>

</template>

<script>
    export default{
        data(){
            imgUrl:'http://.......'
        }
    }
</script>

如果不在前面加上v-bind，默认的“imgUrl”会被当成一个字符串不会解析他的值。

2.v-for循环

例如

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

<script>
    export default{
        data(){
           arr:[{
					name:"小一",
					age:20,
					id:1
				},
				{
					name:"小二",
					age:20,
					id:2
				},
				{
					name:"小三",
					age:20,
					id:3
				},
				{
					name:"小四",
					age:20,
					id:4
				}				
			]
        }
    }
</script>

注意 :key="item.id"

三.注册事件，传参

注册事件v-on:可以省略写为@

例如

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

methods:{
	clickHandle(num,e){
		console.log(num,e)
		}
 }