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>