uni-app之入门语法篇

uni-app之入门语法篇

属性绑定与插值表达式

v-bind:class || :class

• 属性的绑定

		<view :class="title" >
			{{ title }} <br />
			<text v-bind:class="title2">{{title2}}</text>
		</view>

事件绑定

• @click=“btn1” 事件绑定简写

	<button type="default" @click="btn1">按钮1</button>
	<button type="default" v-on:click="btn2">按钮2</button>

事件修饰符

• .stop 阻止冒泡事件
  • 就是子事件由于冒泡事件会触发父级事件，使用.stop去阻止

<template>
	<view>
		我是about
		<view class="" @click="c1">
			我是父亲
			<view @click.stop="c2">我是子</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
		},
		methods: {
			c1() {
				console.log('c1');
			},
			c2() {
				console.log('c2');
			}
		}
	}
</script>

<style>

</style>

数据的双向绑定

• 数据的双向绑定于表单修改

<input type="text" v-model="title2" />

	export default {
		data() {
			return {	
				title:"我是菜鸡",
				title2:"t2"
			}
		},
	}

条件判断与三目

• 三目与v-if

<template>
	<view class="content"> 
		<view :class="title" >
			<button type="default" v-on:click="btn2">按钮2</button>
			<view v-if="flag">
				{{ flag }}
			</view>
			<view v-else>
				{{ flag }}
			</view>
			<view :class="flag? 'red' : 'pink'">
				{{ flag }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {	
				flag:true
			}
		},
		onLoad() {
		},
		methods: {
			btn2(){
				console.log("btn2")
				this.flag = !this.flag
			},
		}
	}
</script>

<style>
	.red{
		color: red;
	}
	.pink{
		color: pink;
	}
</style>

• v-if 与 v-else-if 与 v-else 和v-show

<template>
	<view class="content">
		<view :class="title">
			<button type="default" @click="btn1">按钮1</button>
			<button type="default" v-on:click="btn2">按钮2</button>
			<view v-show="flag">
				我是show
			</view>
			<view v-if="num == 1">{{num}}</view>
			<view v-else-if="num == 2">{{num}}</view>
			<view v-else>{{num}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title2: "t2",
				flag: true,
				num:1
			}
		},
		onLoad() {
		},
		methods: {
			btn1() {
				this.num = 6
			},
			btn2() {
				this.flag = !this.flag
				this.num = 2
			},
		}
	}
</script>

<style>
	.red {
		color: red;
	}

	.pink {
		color: pink;
	}
</style>

列表渲染

• 使用v-for指令

<template>
 	<view class="wrap">
			<view v-for="(item,index) in list" :key="index">
				<view>
					{{ item.age }} -- {{ index }}
				</view>
			</view>
 	</view>
 </template>

 <script>
 	export default {
 		data() {
 			return {
				list:[
					{
						age:20,
					},
					{
						age:30,
					},
					{
						age:40,
					},
				]
			}
 		}
 	}
 </script>