010_Vue表单

最新推荐文章于 2025-04-11 16:31:49 发布

自由与束缚JavaJavaScript

最新推荐文章于 2025-04-11 16:31:49 发布

阅读量222

点赞数

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

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122852115

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

1. 表单例子

1.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单</title>

		<style type="text/css">
			form div {
				height: 40px;
				line-height: 40px;
			}
			form div:nth-child(4) {
				height: 100px;
			}
			form div span:first-child {
				display: inline-block;
				width: 80px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<form action="">
				<div><span>姓名: </span>
					<span><input type="text" v-model="userName" /></span>
				</div>
				<div><span>性别: </span>
					<span>
						<input type="radio" v-model="gender" value="1" /><label>男</label>
						<input type="radio" v-model="gender" value="2" /><label>女</label>
					</span>
				</div>
				<div><span>爱好: </span>
					<span>
						<input type="checkbox" v-model="hobby" value="1" /><label>篮球</label>
						<input type="checkbox" v-model="hobby" value="2" /><label>唱歌</label>
						<input type="checkbox" v-model="hobby" value="3" /><label>跳舞</label>
					</span>
				</div>
				<div><span>职业: </span>
					<span>
						<select v-model="occupation" multiple="multiple">
							<option value="0">请选择职业...</option>
							<option value="1">老师</option>
							<option value="2">工程师</option>
							<option value="3">律师</option>
						</select>
					</span>
				</div>
				<div><span>个人简介: </span>
					<span><textarea v-model="desc"></textarea></span>
				</div>
				<div><input type="submit" value="提交" @click.prevent="handle" /></div>
			</form>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					userName: "张三",
					gender: 2,
					hobby: [1, 3],
					occupation: [2, 3],
					desc: "我是有钱人......"
				},
				methods: {
					handle: function(event){
						console.log("userName=" + this.userName + ", gender=" + this.gender + ", hobby=" + this.hobby + ", occupation=" + this.occupation + ", desc=" + this.desc);
					}
				}
			});
		</script>
	</body>
</html>

1.2. 效果图

2. 表单域修饰符

2.1. .number转化为数字(可以转为数字的值转换成功)。

2.2. .trim剔除掉开头和结尾的空格。

2.3. .lazy将input事件切换为change事件(失去焦点的时候触发)。

2.4. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单域修饰符</title>
	</head>
	<body>
		<div id="app">
			<!-- .number转换为数字 -->
			<input type="text" v-model.number="num1" />
			<input type="text" v-model.number="num2" />
			{{num1 + num2}}<br /><br />

			<!-- .trim剔除掉开头和结尾的空格 -->
			<input type="text" v-model.trim="info" />
			<!-- .lazy将input事件切换为change事件(失去焦点的时候触发) -->
			<input type="text" v-model.lazy="msg" /> {{msg}}
			<button @click="handle">点击</button>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					num1: "",
					num2: "",
					info: "",
					msg: ""
				},
				methods: {
					handle: function(){
						console.log("info = " + this.info)
					}
				}
			});
		</script>
	</body>
</html>

2.5. 效果图