Vue事件处理 - 表单修饰符

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue事件处理 - 表单修饰符

 

目录

表单修饰符

懒加载

修饰数字类型

去除首位空格

总结

---

表单修饰符

在Vue.js中，表单修饰符是用于增强表单输入事件处理功能的一种机制。它们通常与v-model指令结合使用，以提供额外的行为。Vue.js的原生修饰符主要用于键盘事件，但你也可以通过自定义修饰符来扩展它们的功能，尤其是在处理表单输入时。

懒加载

懒加载可以在表单模糊查询中应用，在失去焦点后触发。

示例如下：

<script src="../lib/vue.js"></script>
<div id="box">
    <input type="text" v-model.lazy="mytext">
    {{mytext}}
</div>
<script>
    let vm = new Vue({
        el:"#box",
        data:{
            mytext:""
        }
    })
</script>

 

修饰数字类型

可以把值转化为数字类型；而只使用type=number类型时，

值虽然看起来是数字但类型是字符串。

示例如下：

<input type="number" v-model.number="myage">

去除首位空格

用来去除输入框中前后空格。

示例如下：

<input type="text" v-model.trim="username">

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue事件处理 - 表单修饰符