v-model

最新推荐文章于 2025-10-05 15:06:03 发布

原创最新推荐文章于 2025-10-05 15:06:03 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的简单示例，通过v-model指令完成表单输入字段与组件状态之间的双向数据绑定。示例包括用户名和密码输入框，并演示了如何在点击按钮时获取这些字段的内容。

v-model：双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-model</title>
	<script src="../vuejs/vue.min-1.0.28.js"></script>
</head>
<body>
	<div id="app">
		{{text}}<br/>
		用户名：<input type="text" name="name" v-model='user.name'><br/>
		密  码：<input type="password" name="pwd" v-model='user.pwd'><br/>
		<button v-on:click='getUser()'>注册</button>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				text:'注册用户',
				user:{name:'',pwd:''}
			},
			methods:{
				getUser:function(){
					alert(this.user.name+"====="+this.user.pwd);
				}
			}
		});
	</script>
</body>
</html>