vue3里@click

在Vue 3中，`@click` 是一个指令，用于监听元素上的点击事件。它可以用于绑定一个方法，在元素被点击时执行该方法。

以下是一个示例代码，展示了如何在Vue 3中使用 `@click`：

<template>
  <button @click="handleClick">Click me</button>
</template>

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

在上面的示例中，我们在按钮元素上使用 `@click` 指令来监听点击事件，并将其绑定到 `handleClick` 方法上。当按钮被点击时，`handleClick` 方法会被调用，并在控制台输出 "Button clicked"。

`@click` 指令也可以直接绑定一个表达式或调用一个带参数的方法。例如：

<template>
  <button @click="count++">Increment</button>
  <button @click="sayHello('John')">Say Hello</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    sayHello(name) {
      console.log(`Hello, ${name}!`);
    }
  }
};
</script>

在这个示例中，第一个按钮的点击事件会使 `count` 变量加一，而第二个按钮的点击事件会调用 `sayHello` 方法并传递参数 "John"。

通过使用 `@click` 指令，你可以轻松地在Vue 3中监听元素的点击事件，并执行相应的操作。