在 Vue3 中，表单元素的值可以通过 v-model 指令来双向绑定到数据属性上。为了更好地控制这些表单元素的行为，Vue 提供了一些修饰符，它们可以附加到 v-model 上以实现特定的功能。
阻止默认事件
当你需要阻止表单提交时，可以使用 .prevent 修饰符。这个修饰符会调用 event.preventDefault() 方法，从而防止页面刷新或跳转。
<form @submit.prevent="onSubmit">
<input v-model="form.name" placeholder="请输入姓名">
<button type="submit">提交</button>
</form>在上面的例子中，当用户点击提交按钮时，表单不会提交，也不会刷新页面。取而代之的是，onSubmit 方法会被调用。
阻止事件冒泡
有时候你需要阻止事件冒泡，即防止事件传播到父元素。这时可以使用 .stop 修饰符。这个修饰符会调用 event.stopPropagation() 方法。
<div @click="parentHandler">
<button @click.stop="childHandler">点击我</button>
</div>在这个例子中，尽管点击了子元素，但是父元素的 parentHandler 方法不会被调用，因为 childHandler 使用了 .stop 修饰符来阻止事件冒泡。
阻止输入
在某些情况下，你可能希望阻止用户的输入，比如在电话号码输入框中只允许数字输入。这时可以结合 v-on:input 和正则表达式来实现。
<input v-model="phoneNumber" v-on:input="onlyNumbers">
然后在你的 Vue 实例或组件中添加一个方法：
methods: {
onlyNumbers(event) {
this.phoneNumber = event.target.value.replace(/\D/g, '');
}
}这里使用了正则表达式来移除所有非数字字符。
限制输入长度
你可以通过限制输入框的长度来确保用户输入的内容不超过某个范围。这可以通过监听 input 事件并设置最大长度来实现。
<input v-model="text" v-on:input="limitLength">
然后在你的 Vue 实例或组件中添加一个方法：
-- -------------------- ---- -------
------ -
------ -
----- --
--
--
-------- -
------------------ -
-- ----------------- - --- -
--------- - ------------------ ----
-
-
-在这个例子中，输入框的最大长度被设置为 10 个字符。
禁用输入
有时你需要禁用输入框，使其不可编辑。这可以通过在输入框上设置 disabled 属性来实现。
<input v-model="inputValue" :disabled="isDisabled">
然后在你的 Vue 实例或组件中添加一个布尔值来控制 disabled 属性：
data() {
return {
inputValue: '',
isDisabled: true
};
}在这个例子中，当 isDisabled 为 true 时，输入框将被禁用。
自动聚焦
在某些情况下，你可能希望页面加载时自动聚焦到某个输入框。这可以通过使用 autofocus 属性来实现。
<input v-model="focusInput" autofocus>
注意：autofocus 只在页面加载时有效，一旦页面加载完成，它就不再起作用。如果你需要在其他时候触发聚焦，可以使用 ref 属性和 $refs 对象。
<input v-model="focusInput" ref="myInput">
然后在你的 Vue 实例或组件中添加一个方法来手动聚焦：
mounted() {
this.$nextTick(() => {
this.$refs.myInput.focus();
});
}在这个例子中，当组件挂载完成后，输入框会自动获得焦点。
以上就是 Vue3 中关于表单修饰符的一些常用功能和示例。通过合理地使用这些修饰符，你可以更灵活地控制表单元素的行为。