vue click 修饰

Vue中的@click修饰符用于修改点击事件的行为。常用的修饰符包括：

- `.stop`：阻止事件冒泡，即不再触发父元素上的相同事件。
- `.prevent`：阻止默认行为，即不再执行元素上预设的默认动作。
- `.capture`：使用事件捕获模式，即在父元素上触发相同事件之前先触发该事件。
- `.self`：只有当事件发生在元素本身时才触发事件处理函数，而不是其子元素。
- `.once`：只触发一次事件处理函数，即事件处理函数执行后会自动解绑。
- `.passive`：声明事件处理函数不会调用`preventDefault()`，用于提升滚动性能。

你可以根据需要选择适当的修饰符来修改点击事件的行为。例如，使用`.stop`修饰符可以阻止点击事件冒泡，使用`.prevent`修饰符可以阻止默认行为的执行。示例如下：

<template>
  <button @click.stop="handleClick">Click me</button>
  <a href="#" @click.prevent="handleClick">Prevent default link behavior</a>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log("Button clicked");
    }
  }
}
</script>

在上面的示例中，点击按钮时会触发`handleClick`方法，并输出"Button clicked"。而点击链接时，不会执行默认的跳转行为。