我们可以使用 v-on 指令(简写为 @) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript。用法v-on:click="methodName 或 @click- handler"
事件处理器的值可以是
内联事件处理器:事件被触发时执行的内联JavaScript语句(与 onclick 类似)
方法事件处理器:一个指向组件上定义的方法的属性名或是路径
内联事件处理器通常用于简单场景
<template>
<h3>内联事件处理器</h3>
<button v-on:click="count++">Add</button>
<p>{{ count }}</p>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
}
</script>
这样每点击一次Add按钮数字就会相应的加1
方法事件处理器
<template>
<h3>方法事件处理器</h3>
<button @click="addCount">Add</button>
<p>{{ count }}</p>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods:{
addCount() {
//读取到data里面的数据方案,this.count
this.count++;
}
}
}
</script>