06-v-model修饰符的使用

最新推荐文章于 2024-04-18 16:58:47 发布

林笙10

最新推荐文章于 2024-04-18 16:58:47 发布

阅读量74

点赞数

分类专栏： # 09-v-model的使用文章标签： vue

本文链接：https://blog.csdn.net/weixin_46498227/article/details/116566446

版权

09-v-model的使用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

06-v-model修饰符的使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>v-model修饰符的使用</title>
</head>

<body>
    <div id="app">
        <!-- 1,lazy修饰符 -->
        <!-- lazy修饰符可以让数据在失去焦点或者回车时才会更新 -->
        <input type="text" v-model.lazy="message">
        <h2>{{message}}</h2>

        <!-- 2,number修饰符 -->
        <!-- 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理 -->
        <!-- 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理 -->
        <!-- number修饰符可以让在输入框中输入的内容自动转成数字类型 -->
        <input type="text" v-model.number="age">
        <h2>{{age}}-{{typeof age}}</h2>

        <!-- 3,trim修饰符 -->
        <!-- 如果输入的内容首尾都有很多空格，通常我们希望将其去除 -->
        <!-- trim修饰符可以过滤内容左右两边的空格 -->
        <input type="text" v-model.trim="name">
        <h2>您输入的姓名是：{{name}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                age: 0,
                name: " "
            }
        })
    </script>
</body>

</html>

林笙10

关注

0
点赞
踩
0

收藏

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

06-v-model修饰符的使用<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>v-model修饰符的使用</title></head><body> <div id="app">  <!-- lazy修饰符可以让
复制链接

扫一扫