Vue 3 中如何使用 .prevent 阻止复选框默认行为

在 Vue 3 中，你可以使用.prevent修饰符来阻止复选框的默认行为。.prevent修饰符用于阻止事件的默认行为，比如阻止复选框的默认勾选或取消勾选操作。

以下是在 Vue 3 中如何使用.prevent修饰符在复选框上阻止默认行为的示例代码：

<template>
  <div>
    <input type='checkbox' v-model='isChecked' @click.prevent='preventCheckboxDefault' />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  },
  methods: {
    preventCheckboxDefault(event) {
      // 在这里可以执行你想要的逻辑操作
      // 如果你不想让复选框被勾选或取消勾选，可以使用以下代码：
      event.preventDefault();
    }
  }
};
</script>

在上述示例中，我们使用了.prevent修饰符来阻止复选框的默认行为。当复选框被点击时，preventCheckboxDefault方法将被调用，并且我们可以在该方法中执行自定义的逻辑操作。如果你希望阻止复选框的默认勾选或取消勾选操作，可以在方法中使用event.preventDefault()来实现。