vue06--表单绑定

最新推荐文章于 2023-12-07 20:29:53 发布

婉菡

最新推荐文章于 2023-12-07 20:29:53 发布

阅读量81

点赞数

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

本文链接：https://blog.csdn.net/gcyqweasd/article/details/113797244

版权

前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

该博客展示了如何使用 Vue.js 进行表单元素的双向数据绑定，包括文本输入、密码输入、单选按钮、复选框、下拉菜单和多行文本输入等。同时，它还涉及了 .lazy、.trim 和 .number 等修饰符的用法，用于在用户失去焦点或完成特定操作时同步数据和进行数据格式化。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单绑定</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div><!--普通文本输入域-->
				用户名:<input type="text" v-model.lazy="uname" />{{uname}}<!--v-model实现双向绑定,.lazy实现失去焦点时才同步数据-->
			</div>
			<div><!--密码输入域-->
				密码:<input type="password" v-model.trim="password" /><!--默认去除密码中前后输入的空格-->
			</div>
			<div><!--单选按钮-->
				性别:
				<input type="radio" value="男" name="sex" v-model="sex"/>男
				<input type="radio" value="女" name="sex" v-model="sex"/>女
			</div>
			<div><!--复选框-->
				爱好:
				<input type="checkbox" value="1" name="hobby" v-model="hobby" />学习
				<input type="checkbox" value="2" name="hobby" v-model="hobby" />画画
				<input type="checkbox" value="3" name="hobby" v-model="hobby" />弹钢琴
			</div>
			<div><!--下拉菜单-->
				籍贯:
				<select v-model="pro">
					<option value="-1">---请选择---</option>
					<option value="1">辽宁省</option>
					<option value="2">吉林省</option>
					<option value="3">江苏省</option>
				</select>
			</div>
			<div><!--多行文本输入域-->
				备注:<textarea v-model="comment"></textarea>
			</div>
			<div>
				年龄:<input type="number" v-model.number="age" /><!--.number将从文本框中拿出的数据转换成数值型-->
			</div>
			<div>
				<button type="button" @click="showInfo()">按钮</button>
			</div>
		</div>
		<script>
			let vm = new Vue({
				el:'#app',
				data:{
					uname:'',
					password:'',
					sex:'',
					hobby:[],
					pro:-1,
					comment:'',
					age:0
				},
				methods:{
					showInfo(){
						console.log(typeof(this.age));
					}
				}
			});
		</script>
	</body>
</html>

在这里插入图片描述

婉菡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue06--表单绑定

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表单绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app">
复制链接

扫一扫

专栏目录