vue学习之表单修饰符.lazy|.number|.trim

最新推荐文章于 2024-07-04 10:21:44 发布

蓝小白1024

最新推荐文章于 2024-07-04 10:21:44 发布

阅读量558

点赞数 1

分类专栏：所见即所得-Vue 文章标签： vue

本文链接：https://blog.csdn.net/lxb_wyf/article/details/111317968

版权

所见即所得-Vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

v-model的修饰符

在Vue的语法糖中v-model是用来绑定表单dom的,
v-model是双向绑定的,当检测到数据有改变会立即把数据同步

`.lazy` 懒惰执行

v-model.lazy就可以吧这个同步事情变得懒惰, 只会在失去焦点的时候进行数据同步
下面为代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单修饰</title>
   	<!-- 导入本地的vue.js -->
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="box">
        v-model: <input type="text" v-model.lazy="mytext">
        <br>
        绑定的值: {{ mytext }}
        <hr>
    </div>
    <script>
        var box = new Vue({
            el:"#box",
            data:{
                mytext:""
            }
        })
    </script>
</body>
</html>

`.number` 转换格式

用法和上面.lazy一样
当需要接受用户输入的数据为数字时,使用.number可以结合表单的type="number"进行转换数字

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 导入本地的vue.js -->
    <title>表单修饰</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="box">
        v-model: <input type="number" v-model="mytext"> <br>
        v-model.number: <input type="number" v-model.number="mynumber">
        <button @click="handleSubmit">按钮日志</button>
    </div>
    <script>
        var box = new Vue({
            el:"#box",
            data:{
                mytext:"",
                mynumber:""
            },
            methods:{
                handleSubmit(){
                    console.log("没有使用.number",this.mytext)
                    console.log("使用.number",this.mynumber)
                }
            }
        })
    </script>
</body>
</html>