您的位置：首页 > 其它

v-model及其修饰符的使用

2019-05-20 16:56 106 查看

v-model

预期：随表单控件类型不同而不同
限制: 在input textarea select中使用
修饰符：.lazy .number .trim

基本使用

<!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>

可以看出来当改变input值时，下面的值也随之改变，这就是双向绑定

修饰符

.lazy惰性更新

把刚才的代码改成v-model.lazy=“name”

<input type="text" v-model.lazy="name">

会发现改变输入框里的值时，下面的值不会实时更新，直至我输入完按回车键，或者鼠标点击其他地方input失去焦点时，值才改变。
简而言之就是，当输入框失去焦点后改变绑定的值。

.trim去除前后空格

改一行代码

<input type="text" v-model.trim="name">

效果图如下，虽然输入框中输入很多空格但得到的值空格被去除。

再点击其他地方，使其失去焦点，输入框里的值变成去除空格后的值

.number将输入的字符串转为数字

如果不用.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>

得到的效果是

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航