事件处理v-on或@
我们可以使用v-on
指令(简写@)来监听DOM事件,并在事件触发时执行对应的Javascript。用法:v-on:click="methodName"
或@click="hander"
事件处理器的值可以是:
- 内敛事件处理器:事件被触发时执行的内敛JavaScript语句(与onclick相似)
- 方法事件处理器:一个指向组件定义的方法的属性名或是路径
内敛事件处理器
简单场景:了解即可
<template>
<button@click="count++">点击</button><p>count is: {{ count }}</p>
</template>
<script>export default{data(){return{count:0,}}
}</script>
运行结果:
方法事件处理器
简单场景:常用处理器
<template>
<button@click="addCount">点击</button><p>count is: {{ count }}</p>
</template>
<script>export default{data(){return{count:0,}},methods: {addCount() {this.count++}
}
}</script>
运行结果:
该处理器是通过函数实现。