v-model指令之登录demo

最新推荐文章于 2022-09-03 14:53:26 发布

俗世凡人行

最新推荐文章于 2022-09-03 14:53:26 发布

阅读量527

点赞数

分类专栏： Vue 文章标签： v-model

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107590568

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>模拟登陆</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<form >
				用户名: <input type="text" v-model="user.name" /><br>
				密码: <input type="password" v-model="user.pass" /><br>
				<button type="button" @click="login">登陆</button>				
			</form>
		
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{	
			// name:'',
			// pass:''
			user:{
				name:'',
				pass:''				
			}			
					
		},
		methods:{
			login:function()
			{
				//获取用户名和密码,然后拿到往后端发做登陆验证
				console.log(this.user.name + this.user.pass);						
				
			}
			
		}
	})	
	
</script>