表单域修饰符numebr、trim、lazy

最新推荐文章于 2025-05-13 11:30:16 发布

_XinXinM_

最新推荐文章于 2025-05-13 11:30:16 发布

阅读量311

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/binbinhxx/article/details/112393439

表单域修饰符

number：转化为数值
trim：去掉开始和结尾的空格
lazy：将input事件切换为change事件
1.number：转化为数值

    <input type="text" v-model.number='age'>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id = "app">
    <input type="text" v-model.number='age'>
    <button @click="handle">点击</button>
  </div>
  <script src="vue.js"></script>
  <script>
    /*表单域修饰符*/
    var vm = new Vue({
      el:"#app",
      data:{
        age:''
      },
      methods: {
        handle:function(){
            console.log(this.age + 13)
        }
      }
    }) 
  </script>
</body>
</html>

在这里插入图片描述
2. trim：去掉开始和结尾的空格

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id = "app">
    <input type="text" v-model.number='age'>
    <input type="text" v-model.trim='info'>

    <button @click="handle">点击</button>
  </div>
  <script src="vue.js"></script>
  <script>
    /*表单域修饰符*/
    var vm = new Vue({
      el:"#app",
      data:{
        age:'',
        info:''
      },
      methods: {
        handle:function(){
            // console.log(this.age + 13)
            console.log(this.info.length)
        }
      }
    }) 
  </script>
</body>
</html>

在这里插入图片描述
3.lazy：将input事件切换为change事件
change事件是失去焦点的时候触发.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id = "app">
    <input type="text" v-model.number='age'>
    <input type="text" v-model.trim='info'>
    <input type="text" v-model.lazy='msg'>
    <div>{{msg}}</div>


    <button @click="handle">点击</button>
  </div>
  <script src="vue.js"></script>
  <script>
    /*表单域修饰符*/
    var vm = new Vue({
      el:"#app",
      data:{
        age:'',
        info:'',
        msg:''
      },
      methods: {
        handle:function(){
            // console.log(this.age + 13)
            console.log(this.info.length)
        }
      }
    }) 
  </script>
</body>
</html>

在这里插入图片描述
表单域修饰符：
number的作用就是把表单输入域的内容转化为数值，这样可以方便计算操作；
trim就是去掉字符串开始和结尾的空格，但是字符串中间的空格是去不掉的；
lazy就是把input事件切换为change事件也就是表单输入域的内容发生变化的时候会触发事件，默认是触发input事件。change事件是表单失去焦点的时候会触发。