uni-app 事件与渲染

1. 事件
2. 条件渲染与列表渲染

events.vue

<template>
	<view>
		<!-- @longtap="longTapEvent" 官方已不推荐使用 -->
		<input type="text" :value="value" class="input-style" 
			@input="inputEvent" 
			@focus="focusEvent" 
			@blur="blurEvent"
			@confirm="confirmEvent"
			@click="clickEvent" 
			@tap="tapEvent"
			@longpress="longPressEvent"
			@touchstart="touchStartEvent"
			@touchmove="touchMoveEvent"
			@touchend="touchEndEvent"
			@touchcancel="touchCancelEvent"
		/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: ''
			}
		},
		methods: {
			inputEvent(e) {
				console.log('文本发生变化')
				this.value = e.detail.value
			},
			focusEvent() {
				console.log('获得焦点')
			},
			blurEvent() {
				console.log('失去焦点')
			},
			// 监听web端 Enter 回车键、app端 换行、回车键
			confirmEvent() {
				console.log('点击回车键/换行按钮')
			},
			// web端 click、tap 事件同时存在时，tap 会覆盖 click
			// app端 click、tap 事件同时存在时，先执行 tap 后执行 click
			// 建议使用 tap
			clickEvent() {
				console.log('组件单击事件')
			},
			tapEvent() {
				console.log('组件被触摸')
			},
			// web端 longpress、longtap 事件同时存在时，longTap 会覆盖 longpress
			// app端 longpress、longtap 事件同时存在时，先执行 longtap 后执行longpress
			// longtap 已不建议使用，建议使用 longpress
			longPressEvent() {
				console.log('长时间触摸')
			},
			// longTapEvent() {
			// 	console.log('长时间触摸')
			// },
			touchStartEvent() {
				console.log('触摸开始')
			},
			touchMoveEvent() {
				console.log('触摸移动')			
			},
			touchEndEvent() {
				console.log('触摸结束')			
			},
			touchCancelEvent() {
				console.log('触摸被打断')			
			}
		}
	}
</script>

<style>
	.input-style {
		background-color: #8F8F94;
		height: 100rpx;
	}
</style>

condition.vue

<template>
	<view>
		<view class="button-box-style">
			<button type="primary" @click="toggleIsShow">{{ isShow ? '隐藏' : '显示'}}</button>
		</view>
		<view class="" v-if="isShow">
			<text>Now you can see me! v-if</text>
		</view>
		<view class="" v-else>
			<text>Now you can't see me! v-else</text>
		</view>
		<view class="" v-show="isShow">
			<text>Now you can see me again! v-show</text>
		</view>
		<view class="" v-show="!isShow">
			<text>Now you can't see me again! v-show</text>
		</view>
		<view>
			<text v-html="isShow ? '男' : '女'"></text>
		</view>
		<view class="" v-for="item in dataArray" :key="item.id">
			<text>姓名：{{ item.name }}，</text>
			<text>年龄：{{ item.age }}，</text>
			<view>
				<text>技能：</text>
				<block v-for="(skill, index) in item.skills" :key="index">
					<text v-if="index !== item.skills.length - 1">{{ skill }} 、</text>
					<text v-else>{{ skill }}</text>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				dataArray: [{
						id: 1,
						name: 'Jack',
						age: 19,
						skills: ['HTML', 'CSS', 'Javascript']
					},
					{
						id: 1,
						name: 'Steve',
						age: 20,
						skills: ['PHP', 'MySQL', 'Python']
					},
					{
						id: 1,
						name: 'Stark',
						age: 21,
						skills: ['Java', 'SpringBoot']
					},
				]
			}
		},
		methods: {
			toggleIsShow() {
				this.isShow = !this.isShow
			}
		}
	}
</script>

<style>
	.button-box-style {
		margin: 20rpx;
	}
</style>