<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name">
<pre>{{name}}</pre>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
name:'wanghh',
}
})
</script>
</body>
</html>
把刚才的代码改成v-model.lazy=“name”
<input type="text" v-model.lazy="name">
会发现改变输入框里的值时，下面的值不会实时更新，直至我输入完按回车键，或者鼠标点击其他地方input失去焦点时，值才改变。
简而言之就是，当输入框失去焦点后改变绑定的值。
改一行代码
<input type="text" v-model.trim="name">
效果图如下，虽然输入框中输入很多空格但得到的值空格被去除。
再点击其他地方，使其失去焦点，输入框里的值变成去除空格后的值
如果不用.number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="price">
<pre>{{typeof price}}</pre>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
name:'wanghh',
price:'3333',
},
})
</script>
</body>
</html>
效果图如下
当加上.number
<input type="text" v-model.number="price">
改变输入框的值(输入数字），效果如下
以下代码使用了Input里的radio,checkbox以及textarea和select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label>
男
<input v-model="sex" value="male" type="radio">
</label>
<label>
女
<input v-model="sex" value="female" type="radio">
</label>
<span>{{sex}}</span>
<br />
<br />
<label>
游泳
<input v-model="hobby" value="swimming" type="checkbox">
</label>
<label>
绘画
<input v-model="hobby" value="painting" type="checkbox">
</label>
<span>{{hobby}}</span>
<br />
<br />
<textarea v-model="article"></textarea>
<br />
<br />
<div>你要去哪里</div>
<select v-model="from">
<option value="1">王家沟</option>
<option value="2">知春路</option>
</select>
<span>{{from}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
sex:'female',
hobby:[],
article:'djakshckjdsssssssssssssssssssssssssssssssssssssssssssssa',
from:1,
},
})
</script>
</body>
</html>
得到的效果是
PNG