Vue(day02-01~03:表单操作)

最新推荐文章于 2021-02-24 18:12:03 发布

Lo、

最新推荐文章于 2021-02-24 18:12:03 发布

阅读量119

点赞数

分类专栏：框架文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_44764873/article/details/104122558

版权

框架专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue表单操作

#学习记录#

使用：
1.v-model=""
2.value=""
3.//阻止submit默认行为，提交到本页 <input type=“submit” value=“提交” @click.prevent=“handle”/>
4.this.hobby.toString()

代码显示

<!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://itcast.cn">
			<div>
			    <span>姓名：</span>
			    <span>
					<input type="text" v-model="uname"/>
				</span>
			</div>
			<div id="">
				<span>性别：</span>
				<span>
					<input type="radio" id="male" v-model="gender" value="1"/>
					<label for="male">男</label>
					<input type="radio" id="female" v-model="gender" value="2"/>
					<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>
				<select v-model="occupation" multiple="true">
					<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>
				<!--prevent:阻止默认行为-->
				<input type="submit" value="提交" @click.prevent="handle"/>
			</div>
			</form>
			
		</div>
		
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					uname: 'Lisa',
					gender: 1,
					hobby: ['2','3'],
					//occupation: 2单选
					occupation: ['2','3'],
					desc: 'nihao!'
				},
				methods: {
					handle: function(){
						//console.log(this.uname);
						console.log(this.hobby.toString());
					}
				}
			});
		</script>
	</body>
</html>

表单与修饰符

number：转化为数值
trim：去掉开始和结尾的空格
lazy：将input事件切换为change事件

<input v-model.number='age' type='number'>

Lo、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(day02-01~03:表单操作)

Vue表单操作#学习记录#使用：1.v-model=""2.value=""3.//阻止submit默认行为，提交到本页 <input type=“submit” value=“提交” @click.prevent=“handle”/>4.this.hobby.toString()代码显示<!DOCTYPE html><html> &l...
复制链接

扫一扫