Vue中v-model修饰符和一些常用的表单控制操作

最新推荐文章于 2023-03-01 11:07:04 发布

ChuanYang Chen

最新推荐文章于 2023-03-01 11:07:04 发布

阅读量803

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45525653/article/details/122539928

版权

前端专栏收录该内容

73 篇文章 1 订阅

订阅专栏

Vue中v-model修饰符和一些常用的表单控制操作

表单提交操作：@submit 和 prevent

@submit可以在表单提交瞬间触发相对应的方法，prevent修饰符可以阻止表单提交操作时的「默认事件」，比如“刷新”

v-model.trim 和 v-model.number 和 v-model.lazy 的使用

v-model.trim

去除用户输入的 “字符串” 前的空格和 “字符串” 后面的空格

v-model.number

让用户输入的内容被Vue视为数字，这里需要注意以下内容 ⚠️ 👇

<!-- type="number"是控制输入时只能输入数字 -->
<!-- v-model.number="..."是控制输入的内容被Vue视为数字（默认是字符串） -->
年龄：<input v-model.number="student.age" type="number" />

type=“number” 和 v-model.number="…" 这两个的作用完全不一样

v-model.lazy

lazy可以让vue失去焦点的一瞬间再收集数据，而不是输入一个字符，vue就立刻读取到收集的内容。

对象转JSON字符串

JSON.stringify(对象名);

附录（测试代码）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
</head>
<body>
	<div id="main">
		<!-- 表单提交时触发submit()方法，并且阻止默认事件(刷新) -->
		<form @submit.prevent="submit()">
			姓名：<input v-model.trim="student.name" type="text" /><br /><br />
			<!-- type="number"是控制输入时只能输入数字 -->
			<!-- v-model.number="..."是控制输入的内容被Vue视为数字（默认是字符串） -->
			年龄：<input v-model.number="student.age" type="number" /><br /><br />
			班级：<input v-model="student.class" />
			<!-- lazy可以让vue失去焦点的一瞬间再收集数据 -->
			备注：<input v-model.lazy="student.other"/>
			<!-- button默认type类型是submit -->
			<button>提交表单</button>
		</form>
	</div>
</body>
</html>

<script>
	var vm = new Vue({
		el:"#main",
		data:{
			student:{
				name:'',
				age:'',
				class:'',
				other:''
			}
		},
		methods:{
			submit(){
				// 将对象转化为JSON字符串的方法
				console.log(JSON.stringify(this.student));
			}
		}
	})
</script>

<style>
</style>

ChuanYang Chen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中v-model修饰符和一些常用的表单控制操作

Vue中v-model修饰符和一些常用的表单控制操作表单提交操作：@submit 和 prevent@submit可以在表单提交瞬间触发相对应的方法，prevent修饰符可以阻止表单提交操作时的「默认事件」，比如“刷新”v-model.trim 和 v-model.number 和 v-model.lazy 的使用v-model.trim去除用户输入的 “字符串” 前的空格和 “字符串” 后面的空格v-model.number让用户输入的内容被Vue视为数字，这里需要注意以下内容 ⚠️ ??
复制链接

扫一扫