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:''}})