Vue学习笔记之表单绑定

1. 概述

1.1. 什么是数据的双向绑定

Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。   值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。

1.2. 为什么要实现数据的双向绑定

在Vue.js中，如果使用vuex， 实际上数据还是单向的， 之所以说是数据双向绑定，这是用的UI控件来说， 对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

2. 在表单中使用双向数据绑定

你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇， 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。   注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值

2.1. 单行文本

主要代码：

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单绑定</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input v-model="message" placeholder="edit me">
			<p>Message is: {{ message }}</p>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					message:''
				}
				
			})
		</script>
	</body>
</html>

实现效果:

2.2. 多行文本

主要代码：

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单绑定</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<span>Multiline message is:</span>
			<p style="white-space: pre-line;">{{ message }}</p>
			<br>
			<textarea v-model="message" placeholder="add multiple lines"></textarea>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					message: ''
				}
 
			})
		</script>
	</body>
</html>

实现效果:

2.3. 单复选框

主要代码：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单绑定</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="checkbox" id="checkbox" v-model="checked">
			<label for="checkbox">{{ checked }}</label>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					checked: false
				}
 
			})
		</script>
	</body>
</html>

实现效果:

2.4. 多复选框

多个复选框，绑定到同一个数组：
主要代码：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单绑定</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			<label for="jack">Jack</label>
			<input type="checkbox" id="john" value="John" v-model="checkedNames">
			<label for="john">John</label>
			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			<label for="mike">Mike</label>
			<br>
			<span>Checked names: {{ checkedNames }}</span>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					checkedNames: []
				}
 
			})
		</script>
	</body>
</html>

实现效果:

2.5. 单选按钮

主要代码：

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单绑定</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="example-4">
				<input type="radio" id="one" value="One" v-model="picked">
				<label for="one">One</label>
				<br>
				<input type="radio" id="two" value="Two" v-model="picked">
				<label for="two">Two</label>
				<br>
				<span>Picked: {{ picked }}</span>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					picked: ''
				}
 
			})
		</script>
	</body>
</html>

实现效果:

2.6. 下拉框

主要代码：

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单绑定</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="example-5">
				<select v-model="selected">
					<option disabled value="">请选择</option>
					<option>A</option>
					<option>B</option>
					<option>C</option>
				</select>
				<span>Selected: {{ selected }}</span>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					selected: ''
				}
 
			})
		</script>
	</body>
</html>

实现效果:

2.7. 多选框

主要代码：

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单绑定</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="example-6">
				<select v-model="selected" multiple style="width: 50px;">
					<option>A</option>
					<option>B</option>
					<option>C</option>
				</select>
				<br>
				<span>Selected: {{ selected }}</span>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					selected: []
				}
 
			})
		</script>
	</body>
</html>

实现效果:

3. 参考资料

[1]表单输入绑定 — Vue.js 中文文档

[2]Vue课堂笔记/04表单双绑、组件.md · 卢泽华/Vue - 码云 - 开源中国

posted @   当时明月在曾照彩云归  阅读(182)  评论(0)  编辑  收藏  举报
相关博文：
· Vue学习笔记之Vue基础语法
· Vue学习笔记之Hello Vue
· Vue双向绑定
· Vue双向绑定
· Vue：表单双绑、组件
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
点击右上角即可分享
微信分享提示
AI IDE Trae