uni-app事件处理

最新推荐文章于 2024-11-27 15:45:00 发布

原创最新推荐文章于 2024-11-27 15:45:00 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了uni-app的事件监听和处理方法，包括使用指令监听事件，例如点击button按钮触发counter变量加一的操作，以及在内联语句中直接调用方法进行事件处理。

监听事件

v-on 可以简写成@click 指令监听，当点击button按钮，counter变量就会加一

<template>
	<view class="demo">
		<button @click="counter +=1">add 1</button>
		<view>{{counter}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				counter: 0
			}
		}
	}
</script>

事件处理方法

<template>
	<view class="demo">
		<button @click="greet">Greet</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: 'uni-app'
			}
		},
		methods: {
			greet() {
				// `this`在方法中指向Vue实例
				console.log('Hello '+ this.name)
			}
		}
	}
</script>

除了直接绑定一个方法，也可以在内联语句中调用方法

<template>
	<view class="demo">
		<button @click="say('hi')">Say hi</button>
		<button @click="say('hello')">Say hello</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			say(message) {
				console.log(message)
			}
		}
	}
</script>