Vue的事件处理

1年前更新

180

文章目录[隐藏]

我们可以使用v-on指令(简写为@)来监听DOM事件，并在触发时执行对应的JavaScript代码。

用法：v-on:事件类型="函数"或者@事件类型="函数"。

内联事件处理器

事件被触发时执行的内联JavaScript语句(与onclick相似)

<template>
	<view>
		<button @click="number++">自增{{ number }}</button>
	</view>
</template>

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

一个指向组件上定义的方法属性名或路径

所有的方法和函数都写在methods里面

methods: {

函数....

}

所有写在data里面的值在函数里面都可以用this来读取。

<template>
	<view>
		<button @click="addnumber">自增{{ number }}</button>
	</view>
</template>

<script>
export default {
		data() {
			return {
				number : 0,
			}
		},
		methods: {
			addnumber(){
				this.number++
			}
		}
	}
</script>

评分

欢迎为Ta评分