v-model修饰符 .lazy .number .trim

1、v-model.lazy="xxx"

默认情况下,v-model它是在每次输入数据时触发input事件来更新数据的

使用 .lazy 修饰符后,当改变数据失去焦点-触发change事件来进行更新数据

2、v-model.number="xxx"

它会自动将输入的值自动转成number 类型(可以通过parseFloat转成数值,则会自动转,转不成功的返回原始:asdf123)

会自动开启 type=number 类型

如果输入的值是数字开头,会舍弃非数字后面的值

比如: 123aaaa123,转成的值为123

3、v-model.trim 去除左右空格

代码例子:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model修饰符 .lazy .number .trim</title>
</head>
<body>
   <!--
       1、v-model.lazy="xxx"
        默认情况下,v-model它是在每次输入数据时触发input事件来更新数据的
        使用 .lazy 修饰符后,当改变数据失去焦点-触发change事件来进行更新数据
        
        2、v-model.number="xxx" 
            它会自动将输入的值自动转成number 类型(可以通过parseFloat转成数值,则会自动转,转不成功的返回原始:asdf123)
            会自动开启 type=number 类型
            如果输入的值是数字开头,会舍弃非数字后面的值
            比如: 123aaaa123,转成的值为123  
        3、v-model.trim 去除左右空格
        -->
    <div id="app">
       <h3>v-model.lazy触发change事件来更新</h3>
       <input v-model.lazy="msg" @input="doInput" @change="doChange">
        <span>{{msg}}</span>

        <h3>v-model.number转成number类型</h3>
        <input v-model.number="msg">
        <input v-model="msg" type="number">
        <span>输入的值的类型为{{typeof msg}}</span>

        <h3>v-model.trim 去除左右空格</h3>
        <input v-model.trim="msg">
        <span>{{msg}}值的长度{{msg.length}}</span>
    </div>
   
    
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <script type="text/javascript">
        const {createApp} = Vue;
        const app = createApp({
            data(){
                return {
                  msg:''
                }
            },
            methods:{
                doInput(event){
                    console.log("doInput",event)
                },
                doChange(event){
                    console.log("doChange",event)
                }
            }
        }).mount("#app");
        console.log("app:",app);
    </script>
</body>
</html>
相关推荐
江城开朗的豌豆2 分钟前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
小张成长计划..3 分钟前
VUE工程化开发模式
前端·javascript·vue.js
_oP_i13 分钟前
dify之Web 前端工作流编排(Workflow Builder)
前端·dify
Moment17 分钟前
快手前端校招一面面经 🤔🤔🤔
前端·javascript·面试
搬砖的工人19 分钟前
记录WinFrom 使用 Autoupdater.NET.Official 进行软件升级更新
java·前端·.net
掘根32 分钟前
【Protobuf】proto3语法详解1
开发语言·前端·javascript
IT_陈寒42 分钟前
SpringBoot 3.2新特性盘点:这5个隐藏功能让你的开发效率翻倍 🚀
前端·人工智能·后端
艾小码1 小时前
从入门到精通:JavaScript异步编程避坑指南
前端·javascript
七度光阴;1 小时前
Web后端登录认证(会话技术)
前端·tlias智能辅助系统
菜鸟una2 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript