修饰符.lazy .number .trim

1、lazy
v-model 在每次 input 事件触发后将输入框的值与数据进行同步,也就是在失去焦点或者按下回车键时才更新

<template>
    <div>
        <p>.lazy修饰符</p>
        <input type="text" v-model.lazy="val">
        <p>{{ val }}</p>
    </div>
</template>
<script>
    export default {
        data(){
            return{
              val:''
            }
        }
    }
</script>

2、number
.number 修饰符可以将 输入的值转化为Number类型 ，否则虽然你输入的是数字,但它的类型其实是String，在数字输入框中比较有用

<template>
    <div>
        <p>.number修饰符</p>
        <input type="number" v-model.number="val">
        <p>我的数据类型是：{{ typeof(val) }}</p>
    </div>
</template>

<script>
    export default {
        data(){
            return{
              val:''
            }
        }
    }
</script>

3、trim
.trim 修饰符会自动过滤掉输入的首尾空格

<template>
    <div>
        <p>.trim修饰符</p>
        <input type="text" v-model.trim="val">
        <p>val的长度是：{{ val.length }}</p>
    </div>
</template>

<script>
    export default {
        data(){
            return{
              val:''
            }
        }
    }
</script>

	<div id="app">
		    <input type="text" v-model.trim="name" name="" id="" value="" />
		    <span>{{ name }}</span>
		</div>
	var app = new Vue({
		el: '#app',
		data: {
			name:''
		}
	})