Vue表单操作

最新推荐文章于 2024-05-22 15:48:39 发布

泡老师大迷弟

最新推荐文章于 2024-05-22 15:48:39 发布

阅读量263

点赞数

分类专栏： Vue学习文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/PengK_aha/article/details/128077297

版权

Vue学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、基于Vue的表单操作

       1.input 单行文本
       2.textarea 多行文本
       3.select 下拉多选
       4.radio 单选框
       5.checkbox 多选框

<!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: auto;
			}
			form div span:first-child {
				display: inline-block;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<form action="http://www.baidu.com">
				<div>
					<span>姓名：</span>
					<span>
						<input type="text"  v-model='uname'>
					</span>
				</div>
				<div>
					<span>性别：</span>
					<span>
						<input type="radio" id="male" value="1" v-model="gender">
						<label for="male">男</label>
						<input type="radio" id="female" value="2" v-model="gender">
						<label for="female">女</label>
					</span>
				</div>
				<div>
					<span>爱好：</span>
					<input type="checkbox" id="ball" value="1" v-model="hobby">
					<label for="ball">篮球</label>
					<input type="checkbox" id="sing" value="2" v-model="hobby">
					<label for="sing">唱歌</label>
					<input type="checkbox" id="code" value="3" v-model="hobby">
					<label for="code">写代码</label>
				</div>
				<div>
					<span>职业：</span>
					<!-- 多选下拉 增加 multiple="true"， v-model="occupation" 改为数组对象 -->
					<select v-model="occupation" >
						<option value="0">请选择职业</option>
						<option value="1">教师</option>
						<option value="2">软件工程师</option>
						<option value="3">律师</option>
					</select>
				</div>
				<div>
					<span>个人简介：</span>
					<textarea  v-model="desc" ></textarea>
				</div>
				<div>
					<input type="submit" value="提交" v-on:click.prevent="handle">
				</div>
			</form>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	表单操作
	1.基于Vue的表单操作
		1.input 单行文本
		2.textarea 多行文本
		3.select 下拉多选
		4.radio 单选框
		5.checkbox 多选框
	
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				uname: 'james',
				gender: 1,
				hobby: ['1','2','3'],
				occupation: 0,
				desc: '你好',
			},
			methods: {
				handle: function () {
					console.log(this.uname);
					console.log(this.gender);
					console.log(this.hobby);
					console.log(this.occupation);
					console.log(this.desc)

				}
			}
		});
	</script>
</html>

二、表单域修饰符

      1.number 转化为数值
       <input type="text" v-model.number="age" />

       2.trim 去掉开始和结尾的空格
       <input type="text" v-model.trim="info" />

       3.lazy：将input事件切换为change事件失去焦点
       <input type="text" v-model.lazy="msg" />

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model.number="age" />
			<input type="text" v-model.trim="info" />
			<input type="text" v-model.lazy="msg" />
			<div>{{msg}}</div>
			<button v-on:click="handle">点击</button>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	3.表单域修饰符
		1.number 转化为数值
		<input type="text" v-model.number="age" />
		
		2.trim 去掉开始和结尾的空格
		<input type="text" v-model.trim="info" />
		
		3.lazy： 将input事件切换为change事件 失去焦点
		<input type="text" v-model.lazy="msg" />	
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
				 age: '',
				 info: '',
			},
			methods: {
				handle: function () {
					//console.log(this.age + 13)
					console.log(this.info + '***' + this.info.length)
				}
			}
		});
	</script>
</html>