事件处理
我们可以使用 v-on
指令 (简写为 @
) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript。用法:v-on:click="methodName"
或 @click="handler"
事件处理器的值可以是
- 内联事件处理器:事件被触发时执行的内联 JavaScript 语句 (与
onclick
类似) - 方法事件处理器:一个指向组件上定义的方法的属性名或是路径
内联事件处理器
内联事件处理器通常用于简单场景
<template><button @click="count++">Add 1</button><p>Count is: {{ count }}</p>
</template>
<script>
export default {data() {return {count:0}}
}
</script>
方法事件处理器
<template><button @click="addCount">Add</button><p>Count is: {{ count }}</p>
</template>
<script>
export default {data() {return {count:0}},// 所有的方法或者函数都放在这里methods:{addCount(){this.count+=1}}
}
</script>
实时效果反馈
1. 在Vue中,下列添加事件方法正确的是:
A onClick
B :click
C @click
D click
答案
1=>C