vue修饰符

原创已于 2023-08-31 10:10:40 修改 · 81 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2023-08-31 09:49:29 首次发布

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

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

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

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

表单修饰：

.lazy修饰符：用于在失去焦点或按下Enter键时更新数据，而不是在每次输入时都更新。
.number修饰符：用于将输入的值转换为数字类型。
.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>