vue实现表单数据自动收集

最新推荐文章于 2024-03-18 21:25:41 发布

笔描相思

最新推荐文章于 2024-03-18 21:25:41 发布

阅读量424

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/qq_44788119/article/details/110095065

版权

学习专栏收录该内容

95 篇文章 0 订阅

订阅专栏

1:代码

<!DOCTYPE html>
<html>
	<head>
		<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
		<link rel="stylesheet" type="text/css" href="semantic.min.css">
		<script src="jquery-3.4.1.min.js" crossorigin="anonymous"></script>
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="js/jquery-3.4.1.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="js/bootstrap.min.js"></script>
		<script src="axios-master/dist/axios.min.js"></script>
		<link href="css/main.css" />
		<title></title>
	</head>
	<body>
		<div id="name">
			<input type="text" v-model="fristname" />
			<input type="text" v-model="lastname" />
			<input type="text" v-model="fullname" />
			<a v-on:click="hh()" href="#">w我</a>
		</div>
		<div>
			<p>vue实现表单自动收集</p>
			<form  id="name1" @submit.prevent="hh">
				<label>账户</label>
				<input type="text" v-model="accont" />
				<br>
				<label>密码</label>
				<input type="text" v-model="pw" />
				<br>
				<input type="radio" value="女" v-model="male"/><label>女</label>
				<input type="radio" value="男" v-model="male"/><label>男</label>
				<br>
				<input type="checkbox" value="foot" v-model="spo"/>足球
				<input type="checkbox" value="foot1" v-model="spo"/>男球
				<input type="checkbox" value="foot2" v-model="spo"/>域球
				<br>
				<select  v-model="id">
					<option>请选择</option>
					<option v-for="(Intem,index) in allCitys" :key="index" :value="index">{{Intem.name}}</option>
				</select>
				<input type="submit"  value="提交"/>
			</form>
		</div>

	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#name',
			data: {
				fristname: "a",
				lastname: "b"
			},
			methods:{
				hh:function(){
					alert("hh");
				}
			},
			
			computed: {
				fullname: function(value) {
					return this.fristname +' ' + this.lastname;
				},
				fullname: {
					get() {
						return this.fristname + ' ' + this.lastname;
					},
					set(vale) {
						const name = vale.split(' ');
						this.fristname = name[0];
						this.lastname = name[1];
					}
				}


			}
		})
	
	    var vm = new Vue({
	    	el: '#name1',
	    	data: {
	    	"accont":"",
			"pw":"",
			"male":"女",
			"spo":[],
			"allCitys":[{id:1,name:'BJ'},{id:2,name:'JK'}],
			"id":0
			
	    	},
	    	methods:{
	    		hh:function(){
	    			alert("hh");
					console.log(this.accont,this.pw,this.male,this.spo,this.id);
	    		}
	    	}
	    })
	</script>
</html>

结果：
在这里插入图片描述

笔描相思

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实现表单数据自动收集

1:代码<!DOCTYPE html><html> <head> <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script> <link rel="stylesheet" type="text/css" href="semantic.min.css"> <script src="jquery-3.4.1.min.js" cros
复制链接

扫一扫

专栏目录