文件
专题 ·
最新
首页
  • 我的主页卡化石
  • off中心
  • 基本设置
  • 文件上传

vue使用v-model(双向数据绑定)自动收集表单数据

weblog 2206 0 0
vue使用v-model(双向数据绑定)自动收集表单数据
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!--prevent阻止默认行为-->
			<form action="/a" @submit.prevent="sub">
				<span>用户名</span>
				<input type="text" v-model="username"/><br />
				
				<span>密码</span>
				<input type="password" v-model="pwd"/><br />
				
				<span>性别</span>
				<input type="radio" id="nv" value="女" v-model="sex" />
				<label for="nv">女</label>
				<input type="radio" id="nan" v-model="sex" value="男"/>
				<label for="nan">男</label><br />
				
				<span>爱好</span>
				<input type="checkbox" id="lq" value="lq" v-model="hobby"/>
				<label for="lq">篮球</label>
				<input type="checkbox" id="zq" value="zq" v-model="hobby"/>
				<label for="zq">足球</label><br />
				<input type="checkbox" id="ppq" value="ppq" v-model="hobby"/>
				<label for="ppq">乒乓球</label><br />
				
				<span>城市</span>
				<select v-model="cid">
					<option value="" selected="selected">请选择</option>
					<option value="1">郑州</option>
					<option value="2">上海</option>
					<option value="3">北京</option>
				</select>
				<br />
				
				<span>介绍</span>
				<textarea rows="10" v-model="des"></textarea><br /><br />
				
				<input type="submit" name="" id="" value="提交"/>
				
			</form>
		</div>
		<script>
			var v=new Vue({
				el:'#app',
				data:{
					username:'',
					pwd:'',
					sex:'女',
					hobby:['ppq'],
					cid:'',
					des:'sdf'
				},
				methods:{
					sub(){
						console.log(this.cid);
					}
				}
			})
		</script>
	</body>
</html>

 

猜你喜欢
weblog 1838 vue表达式-数据绑定-事件绑定!DOCTYPEhtmlhtml head metacharset="UTF-8" title/title scriptsrc="https
数据结构与算法 1623 胜利者，求胜利者的编号，以及出局者的顺序。解决方案使用双向循环链表测试数据m=9,n=5输出：517436928代码（c++描述）Node.h#pragmaonceclassNode{public: i
数据结构与算法 1747 代码：数组a是未排序集合，已排序的集合是逻辑上的一个集合，可以看作是head，实现是一个双向链表，add方法向集合添加数据，每次找到对应的位置，使链表有序，toArray方法使已排序的集合输出成int数
前端(h5) 1508 h2h1----h2--------h3h1----h3----h2--------h42.案例如图：本文就介绍如何使用js设计数据结构，巧妙利用双向链表实现将顺序的目录，转换成树状目录。3.js代码scr
weblog 3922 vue使用v-for遍历数组和遍历对象splic(...)方法的使用请参考：http://www.jiajiajia.club/blog/artical/262!DOCTYPEhtmlhtml
java项目 1394 springboot+mybatis配置多数据源并利用aop实现自动切换(demo)
java 数据库 2609 java项目-数据库之间定时进行数据交换服务（右上方下载）压缩包内附sql脚本，本项目为springboot+mybatis框架，导入项目即可启动测试。目的，实现两个数据库定时自动进行数据同步，定时
框架 1731 一般分页查询的接口都需要传入page（当前第几页）,limit（限制行数）两个参数。如果框架本身没有做处理的话我们需要自己在控制层写参数去接收和处理这俩参数。如何配置基础框架，让其自动接收和处理这些
推荐
目录
没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。