v-on的使用
v-on的使用
v-on
主要使用在一些事件上。比如点击事件。简写方式@eventName
。
代码:
<template>
<div>
<button @click="add">ADD 1</button>
<p>{{value}}</p>
</div>
</template>
<script>
export default {
data(){
return {
value:0,
}
},
methods:{
add(){
this.value ++
}
}
}
</script>
<style>
</style>
上述代码演示了按钮的点击事件。其他的事件同样可以用这种方式进行绑定。如果你需要原始的event对象:
<template>
<div>
<button @click="add($event)">ADD 1</button>
<p>{{value}}</p>
</div>
</template>
<script>
export default {
data(){
return {
value:0,
}
},
methods:{
add(e){
console.log(e)
this.value ++
}
}
}
</script>
有时候多个元素重叠在一起,此时的点击事件可能会发生传递,如果需要阻止事件冒泡,我们只要在事件后面加一个修饰符.stop
就可以了,现在的代码变成了
<template>
<div>
<button @click.stop="add($event)">ADD 1</button>
<p>{{value}}</p>
</div>
</template>
<script>
export default {
data(){
return {
value:0,
}
},
methods:{
add(e){
console.log(e)
this.value ++
}
}
}
</script>
一般情况下这样就能阻止事件冒泡,但是在有些情况下不一定可以生效,比如在leaflet组件中,事件被2次封装过,那么.stop
修饰符是无效的。
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。