一、v-model.lazy修饰符
<div id="app">
<input type="text" v-model.lazy="name"/><br>
<pre>{{name}}</pre>
</div>
var app=new Vue({
el: '#app',
data:{
name:'赵四',
},
});
初始效果:
修改后,点击空白处之前:
点击空白处之后:
二、v-model.trim修饰符
<input type="text" v-model.trim="ident"/><br>
<pre>{{ident}}</pre>
输入框的前后空格都被舍弃
三、 v-model.number修饰符
<input type="text" v-model.number="number"/><br>
<pre>{{number}}</pre>
var app=new Vue({
el: '#app',
data:{
name:'赵四',
ident:'2102929394',
number:'12',
},
});
将字符串'12',自动转换为数字12
四、本篇完整代码
index.html
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chapter18.4</title>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy="name"/><br>
<pre>{{name}}</pre>
<input type="text" v-model.trim="ident"/><br>
<pre>{{ident}}</pre>
<input type="text" v-model.number="number"/><br>
<pre>{{number}}</pre>
</div>
<script src="lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
main.js
var app=new Vue({
el: '#app',
data:{
name:'赵四',
ident:'2102929394',
number:'12',
},
});