v-model指令

最新推荐文章于 2022-06-09 15:37:47 发布

跳跳呦�

最新推荐文章于 2022-06-09 15:37:47 发布

阅读量202

点赞数

分类专栏： Vue Web 文章标签： vue v-model .trim .lazy .number

本文链接：https://blog.csdn.net/weixin_44010187/article/details/94433057

版权

Vue 同时被 2 个专栏收录

28 篇文章 2 订阅

订阅专栏

Web

15 篇文章 0 订阅

订阅专栏

v-model指令将数据和页面元素进行双向绑定

<p>v-model：{{text}}</p>
			<p>v-model.lazy：{{text1}}</p>
			<p>v-model.number：{{ typeof(text2) }}</p>
			<p>v-model.trim：{{text3.length}}</p>
			<hr>
			
			<p>v-model：<input type="text" v-model="text"></p>
			<p>v-model.lazy：<input type="text" v-model.lazy="text1"></p>
			<p>v-model.number：<input type="number" v-model.number="text2"></p>
			<p>v-model.trim：<input type="text" v-model.trim="text3"></p>

new Vue({
			el: '#s11',
			data: {
				text: 'text',
				text1: 'text1',
				text2: '0',
				text3: 'text3',
				textArea: 'textArea',
				radio: '',
				checkbox: '',
				select: ''
			}
		})

上面分别是HTML页面和js代码
1.普通的v-model指令，默认同步数据，即表单中输入怎样的数据，绑定的页面元素展示相同的数据，看效果，同步改变数据
在这里插入图片描述
2.v-model.lazy 只有在进行change事件中同步，即在失焦或者回车的时候发生改变，看效果：
失焦前----

失焦后—

3.v-model.number
默认输入的数字为string类型，如图

当数字发生改变时，变成number类型
4.v-mode.trim自动过滤调输入的首尾空格