22.表单修饰符 .number .trim .lazy

最新推荐文章于 2023-05-05 17:35:42 发布

code_dream_wq

最新推荐文章于 2023-05-05 17:35:42 发布

阅读量176

点赞数

分类专栏： # vue学习

本文链接：https://blog.csdn.net/code_dream_wq/article/details/110230544

版权

vue学习专栏收录该内容

40 篇文章 1 订阅

订阅专栏

- .number 转换为数值

- 注意点：
- 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
- 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。

- .trim 自动过滤用户输入的首尾空白字符

- 只能去掉首尾的不能去除中间的空格

- .lazy 将input事件切换成change事件

- .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
- 在失去焦点或者按下回车键时才更新

  ```html
  <!-- 自动将用户的输入值转为数值类型 -->
  <input v-model.number="age" type="number">
  
  <!--自动过滤用户输入的首尾空白字符   -->
  <input v-model.trim="msg">
  
  <!-- 在“change”时而非“input”时更新 -->
  <input v-model.lazy="msg" >
  ```

例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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 type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      表单域修饰符
    */
    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>

code_dream_wq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
22.表单修饰符 .number .trim .lazy

- .number 转换为数值 - 注意点： - 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值 - 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。- .trim 自动过滤用户输入的首尾空白字符 - 只能去掉首尾的不能去除中间的空格- .lazy 将input事件切换成change事件 - .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上-...
复制链接

扫一扫