Vue 表单修饰符

最新推荐文章于 2024-02-02 11:17:40 发布

yshusencsdn

最新推荐文章于 2024-02-02 11:17:40 发布

阅读量690

点赞数

文章标签： vue 表单修饰符前端前端框架

本文链接：https://blog.youkuaiyun.com/yshusencsdn/article/details/102631871

版权

本文详细介绍了Vue中表单修饰符的使用方法，包括lazy、number和trim三种修饰符，分别用于改变事件触发时机、数值类型转换及去除输入空白字符。通过实例展示了如何在实际项目中应用这些修饰符，提升表单处理效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 表单修饰符

总结：
（1）lazy 当表单失去焦点时触发事件
（2）number 当number类型的值使用v-model绑定后会变成 String类型，number可以将其转化成数字类型
（3）trim 自动去掉户输入的首尾空白字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue表单修饰符</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="name">
	<!--lazy 失去焦点触发事件-->
    <input type="text" v-model.lazy="name">
	<!--number 当number类型的值使用v-model绑定后会变成 String类型，number可以将其转化成数字类型-->
    <input type="text" v-model.number="num">
	<!--自动去掉户输入的首尾空白字符-->
    <input type="text" v-model.trim="name">

    <h2>{{name}}</h2>
    <button @click="fn">按钮</button>
</div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'小白脸',
            num:10,//Number
        },
        methods:{
            fn(){
                console.log(this.num);
                console.log(this.name);
            }
        }
    })
</script>