【前端框架Vue】基本指令：双向绑定v-model_hbuilder x 里面的v-model-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_55723857/article/details/135026421

本次主要介绍Vue的基本指令：双向绑定v-model。

使用工具：HbuilderX

双向绑定是什么意思？

双向绑定是属性绑定的一种方式，至于属性绑定是什么，可以看下这篇文章：【前端框架Vue】基本指令：v-bind 属性绑定

v-model怎么用？

我们之前写过一个登录和注册页面的切换，里面涉及到用户输入。那么v-model便是用于这种场景。

当我们用单向绑定，可以实现：一进入页面，登录的用户名、密码自动填充。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>csdnWebPage</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id='app'>
			<button type='button' @click="toggleForm">切换</button>

			<div v-show="showLogin">
				<!-- 登录表单 -->
				<h2>登录</h2>
				<form>
					用户名：<input type="text" :value="loginForm.username"/> <br />
					密码：<input type="password" :value="loginForm.pwd"/>
				</form>
			</div>

			<div v-show="!showLogin">
				<!-- 注册表单 -->
				<h2>注册</h2>
				<form>
					手机：<input type="text" :value="registrationForm.phone"/> <br />
					密码：<input type="password" :value="registrationForm.pwd"/><br />
					确认密码：<input type="password" :value="registrationForm.repwd"/>
				</form>
			</div>
		</div>
		<script>
			var csdnWeb = {
				data() {
					return {
						loginForm: {
							username: 'cscdn',
							pwd: '1234567',
						},
						registrationForm:{
							phone: '15812234568',
							pwd: '1234567',
							repwd: '1234567'
						},
						showLogin: true,
					};
				},
				methods: {
					toggleForm() {

						this.showLogin = !this.showLogin;
					},
				},
			};
			var App = Vue.createApp(csdnWeb)
			App.mount('#app')
		</script>
	</body>
</html>

这个时候，如果想要去修改用户名或密码，我们会发现，Vue的data是没有接收到变化后的值。这个时候，我们的绑定方式就要变成v-model。

只需要修改这两部分的绑定方式如下即可：


<form>
    用户名：<input type="text" v-model="loginForm.username"/> <br />
	密码：<input type="password" v-model="loginForm.pwd"/>
</form>


<form>
	手机：<input type="text" v-model="registrationForm.phone"/> <br />
	密码：<input type="password" v-model="registrationForm.pwd"/><br />
	确认密码：<input type="password" v-model="registrationForm.repwd"/>
</form>

这时候我们再来看看变化：