v-model 三种修饰符的使用

最新推荐文章于 2022-11-28 00:19:59 发布

莫余

最新推荐文章于 2022-11-28 00:19:59 发布

阅读量453

点赞数

分类专栏：凌晨3:40的Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44824148/article/details/112829260

版权

凌晨3:40的Vue 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

v-model 修饰符

lazy修饰符：

默认情况下，v-model默认是在input事件中同步输入框的数据的，一旦有数据发生改变对应的data中的数据就会自动发生改变。

lazy修饰符可以让数据在失去焦点或者回车时才会更新

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model.lazy="message">
        <h2>{{message}}</h2>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            }
        })
    </script>
</body>

</html>

number修饰符：

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
number修饰符可以让在输入框中输入的内容自动转成数字类型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="number" v-model.number="message">
        <h2>{{message}}-{{typeof message}}</h2>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 0
            }
        })
    </script>
</body>

</html>

trim修饰符：

如果输入的内容首尾有很多空格，通常我们希望将其去除trim修饰符可以过滤内容左右两边的空格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model.trim="message">
        <h2>{{message}}</h2>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        })
    </script>
</body>

</html>

莫余

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
v-model 三种修饰符的使用

v-model 修饰符lazy修饰符：默认情况下，v-model默认是在input事件中同步输入框的数据的，一旦有数据发生改变对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点或者回车时才会更新<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-
复制链接

扫一扫