uni-app事件处理

最新推荐文章于 2025-03-24 10:55:26 发布

lgrrrr

最新推荐文章于 2025-03-24 10:55:26 发布

阅读量488

点赞数

本文链接：https://blog.youkuaiyun.com/lgrrrr/article/details/104790676

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

监听事件

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>