• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

一文轻松了解v-model及其修饰符

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

用来绑定数据和元素value值,实现双向绑定。

当元素的值改变的时候,数据也改变,反过来,当数据发生改变,元素的值也改变。

在大部分情况下,所有用户的输入值都要通过v-model,一来好用,二来安全,而且功能也很强大。

<div class="app">
	<input type="text" v-model="name">
	{{name}}
</div>
var app = new Vue({
	el:'.app',
	data:{
		name:'Alice'
	}
});

v-model的修饰符:

lazy

懒惰,表示惰性更新,不会立马更新。

事实上它是触发了一个change事件。

好处:当用户输入完了才绑定,才会显示表单验证的结果,不管正确还是错误。但在用户输入的过程中,不去打扰他。另外性能也有一点点的提高(不过很小,可以忽略不计)

<div class="app">
    <input type="text" v-model.lazy="name">
    {{name}}
</div>

trim

修剪; 切去,割掉,这里表示:去掉前后两端的所有空格

<div class="app">
    <input type="text" v-model.trim="name">
    {{name}}
</div>

number

一般用于年龄、价钱等可以用数字来表示的类型

<div class="app">
    <input type="text" v-model.number="age">
    {{age}}
</div>

在通常情况下,如果没有number,用户输入的是数字,但是也是字符串的数字。如果这里填了修饰符 v-model.number那么得到就是number类型的数字了,不用再转换了。

v-model除了能在input 的type为text输入框中使用,还能在其他地方使用。

v-model在不同input类型以及在其他元素上的使用

1.除了在以外,还能在input元素为其他类型上使用

1.1  在input元素 类型为radio上使用(单选框)

<div class="app">
	<label>
		男
		<input type="radio" v-model="sex" value="male">
	</label>
	<label>
		女
		<input type="radio" v-model="sex" value="famale">
	</label>
	{{sex}}
</div>
//main.js
var app = new Vue({
	el:'.app',
	data:{
		sex:'',
	}
});

1.2在input元素 类型为checkbox上使用(复选框)

<div class="app">
	你喜欢男的还女的:<br>
	<label>
		男
		<input type="checkbox" v-model="sex" value="male">
	</label>
	<label>
		女
		<input type="checkbox" v-model="sex" value="famale">
	</label><br>
	{{sex}}
</div>
var app = new Vue({
	el:'.app',
	data:{
		sex:['male'],
	}
});

2. v-model在textarea中的使用(多行文本)

多行文本

其实多行文本,跟单行文本的使用没有什么区别,只不过一个多行一个单行,使用是一样的。

<div class="app">
	<textarea v-model="article"></textarea>
</div>
var app = new Vue({
	el:'.app',
	data:{
		article:`has a lot of code。。。。。。。。。。。。。。。。。。。。`,
	}
});

3. v-model在select中的使用(下拉列表)

3.1 单选下拉列表

<div class="app">
	<div>where are you from?</div>
	<select v-model='from'>
		<option value="1">GUANGZHOU</option>
		<option value="2">BEIJING</option>
	</select>
</div>
var app = new Vue({
	el:'.app',
	data:{
		from:'1',
	}
});

3.2 多选下拉列表

其实就是元素加个multiple属性,表示多个,多选

<div class="app">
	<div>where are you want to go?</div>
	<select v-model='from' multiple>
		<option value="1">GUANGZHOU</option>
		<option value="2">BEIJING</option>
		<option value="4">SHANGHAI</option>
		<option value="5">CHENGDU</option>
	</select>
</div>

var app = new Vue({
	el:'.app',
	data:{
		from:['1','2'],
	}
});

总结

到此这篇关于v-model及其修饰符的文章就介绍到这了,更多相关v-model及其修饰符内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue element 表头添加斜线的实现代码发布时间:2022-02-05
下一篇:
JavaScript实现橱窗展示效果发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap