Vue之v-model修饰符（015）

最新推荐文章于 2021-11-14 16:30:47 发布

从小白小菜开始

最新推荐文章于 2021-11-14 16:30:47 发布

阅读量98

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_31707323/article/details/115708379

版权

Vue 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

Vue之v-model修饰符

v-model.lazy
完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h3>v-model.lazy</h3>
			<input type="text" v-model.lazy="mytext" /><br>
			<label>你输入的是：</label>
			<p>{{mytext}}</p>
		</div>
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					mytext: "", //该值是默认项
				}
			})
		</script>
	</body>
</html>

失去焦点或者会车前效果如图：
在这里插入图片描述
失去焦点或者会车后效果如图：

2. v-model.number v-model.trim
完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h3>v-model.lazy</h3>
			<input type="text" v-model.trim.number="mytext" @keyup="handKeyUp" /><br>
			<label>你输入的是：</label>
			<p>{{mytext}}</p>
		</div>
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					mytext: "", //该值是默认项
				},
				methods: {
					handKeyUp() {
						console.log(this.mytext, typeof(this.mytext));
					}
				}
			})
		</script>
	</body>
</html>

后面加了三个空格效果如图：
在这里插入图片描述
总结：Vue之v-model修饰符用法很简单，但在实际工作中很有用。

从小白小菜开始

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之v-model修饰符（015）

Vue之v-model修饰符v-model.lazy完整代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>v-model</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head&
复制链接

扫一扫