一、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',
},
});
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
