037——VUE中表单控件处理之表单修饰符：lazy/number/trim-优快云博客

本文介绍了Vue中用于处理表单输入的三种修饰符：lazy（懒加载）、number（数值化）和trim（去除空格）。通过实例展示了如何使用这些修饰符来改善用户体验并简化数据处理流程。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件处理之表单修饰符：lazy/number/trim</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="lantian">
    <!--lazy(懒惰的) ：
        使用lazy修饰符之后，当文本框失去焦点之后，才会更新同input绑定同样数据的数据。
    -->
    lazy修饰符测试：<br>
    <input type="text"  v-model.lazy="lazydata"><br>
    {{lazydata}}<br>

    <!--number:
        强制使得输入的数据的字符类型变成number型
    -->
    number修饰符测试：<br>
    <input type="number" v-model.number="numberData"><br>

    <!--trim:
        输入的空格，不调用事件方法
    -->
    trim修饰符测试：<br>
    <input type="text" v-model.number.trim="trimData"><br>
</div>
<script>
    var app = new Vue({
        el: '#lantian',
        watch:{
            numberData:function (newData,oldData) {
                console.log(typeof (newData));//输出：number
            },
            trimData:function (newData,oldData) {
                console.log(newData.length);
            }
        },
        data: {
            lazydata:'lazy中的默认数据',
            numberData:"number修饰符测试使用的数据",
            trimData:"trimData"
        }
    });
</script>

</body>
</html>