表单修饰符

表单修饰符一共有三个，分别是.lazy，.number，.trim，都是用来修饰v-model属性的。

.lazy修饰符

.lazy修饰符是将input输入框的数据绑定v-model从实时监听的状态变为change状态

    <div id="app">
        <input type="text" v-model.lazy='a'>
        <p>{{a}}</p>
    </div>    
    <script src="./js/vue.js"></script>
    <script>
        var vue= new Vue({
            el:"#app",
            data:{
                a:100
            },
            methods: {
                add(){                  
                    console.log(this.a)   
                    console.log(typeof(this.a))                  

                }
            }
        })
    </script>

 

 

 

 此时鼠标点击输入框，在其中输入内容之后，当输入框失去焦点的时候数据会同步发生改变。输入的数据会显示出来。

 

.number修饰符

.number修饰符的作用是将内容转化为数字类型

<input type="text" v-model.number='a' @input='add'>

 

 

 此时在输入非数字，就会被过略掉。

注意：.number修饰符会将非数字内容进行过滤，得到的是纯数字类型，是可以进行计算的非NaN数字。

若是没有.number修饰符，得到的数字都会是string类型。

 

 

 

 

.trim修饰符

.trim修饰符的作用是过滤用户输入的首尾空格。

没有设置.trim修饰符之前，我们得到的数据是这样的：

 

 设置了.trim属性之后

<input type="text" v-model.trim='a' @input='add'>

 

 

 

此时我们看到清除首部和尾部的空格的数据