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

最新推荐文章于 2023-10-21 15:05:15 发布

小梦新靓

最新推荐文章于 2023-10-21 15:05:15 发布

阅读量202

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_43712187/article/details/103265096

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、change事件

input事件：

input事件在输入框输入的时候回实时响应并触发

change事件：

change事件在input失去焦点才会考虑触发，它的缺点是无法实时响应。与blur事件有着相似的功能，但与blur事件不同的是，change事件在输入框的值未改变时并不会触发，当输入框的值和上一次的值不同，并且输入框失去焦点，就会触发change事件。

二、v-model修饰符学习

2.1、 . lazy: 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue-2.4.0.js"></script>
</head>
<body>
<div class="app">

    <input v-model.lazy="text"  />

    <p>这里显示数据属性 text 的值<br />
        <span id="important">{{text}}</span>

</div>
<script>
    new Vue({
  el:'.app',
        data:{
   text:''
        }
    })
</script>
</body>
</html>

在这里插入图片描述

2.2、.number修饰符

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

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
这通常很有用，因为在 type=“number” 时 HTML 中输入的值也总是会返回字符串类型。

2.3、.trim过滤修饰符

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

自动过滤用户前后输入的空格

小梦新靓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model 修饰符：.lazy .number .trim

一、change事件input事件：input事件在输入框输入的时候回实时响应并触发change事件：change事件在input失去焦点才会考虑触发，它的缺点是无法实时响应。与blur事件有着相似的功能，但与blur事件不同的是，change事件在输入框的值未改变时并不会触发，当输入框的值和上一次的值不同，并且输入框失去焦点，就会触发change事件。二、v-model修饰符学...
复制链接

扫一扫