Vue的v-model.number顾名思义，即是将绑定的参数中的字符串强制转换为int类型
而v-model.trim是将参数的前后空格删除
v-model.lazy：v-model的绑定是实时响应，lazy则是在输入完成后，焦点离开v-model绑定的控件后响应
以下是实例：
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style type="text/css">
div{
margin: 30px;
}
.mulitStyle{
height:auto;
}
</style>
</head>
<body>
<div id="app">
<form action="https://www.baidu.com">
<div>
<input type="text" name="" v-model.number="age">
<input type="text" name="" v-model.trim="uname">
<input type="text" name="" v-model.lazy="age">
</div>
<div><input type="submit" name="" @click.prevent="handle"></div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
uname:'张三',
age:''
},
methods:{
handle:function(){
console.log(this.uname);
console.log(this.age+3);
}
}
})
</script>
</body>
</html>
View Code