vue修饰符

Vue.js有许多修饰符，用于控制指令的行为。以下是一些常用的修饰符：
事件修饰：

1. .prevent：阻止默认行为
2. .stop：阻止事件冒泡
3. .capture：添加事件监听器时使用事件捕获模式
4. .self：只当事件是从该元素本身触发时才触发回调
5. .once：只触发一次回调
6. .passive：指示浏览器不应在滚动期间阻止事件的默认行为
7. .exact：精确匹配由多个按键组合的事件，即必须完全匹配按键组合

例如，.prevent修饰符可以在执行事件时阻止默认行为，如下：

<form v-on:submit.prevent="onSubmit">
  <!-- 输入框和提交按钮 -->
</form>

表单修饰：

1. .lazy修饰符：用于在失去焦点或按下Enter键时更新数据，而不是在每次输入时都更新。

2. .number修饰符：用于将输入的值转换为数字类型。

3. .trim修饰符：用于去除输入字符串的首尾空格。

使用示例：

<template>
  <div>
    <form>
      <input type="text" v-model.lazy="text" />
      <input type="number" v-model.number="number" />
      <input type="text" v-model.trim="trimmedText" />
      <button @click.prevent="submitForm">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      number: '',
      trimmedText: ''
    };
  },
  methods: {
    submitForm() {
      // 提交表单操作
    }
  }
};
</script>