vue之表单处理（一）
实验介绍
在日常的开发中，表单随处都被使用到，如：登录，问题反馈功能等。对表单的数据收集和绑定也是很常规的工作。在一般开发中处理表单，需要通过操作 DOM 来实现，是一个相对繁琐且低效率的工作。然而在 Vue 项目中你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。轻松地实现表单数据收集或绑定，提高了开发效率。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。接下来带领大家看看其基础用法。
知识点
- v-model 指令
- 基础用法
- 值绑定
- 修饰符
基本用法
常用表单元素
| 元素 | |
|---|---|
| input[type=*] | 文本输入框 |
| textarea | 多行文本 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| select | 选择框 |
注意
注意一：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。直接给元素 value 赋值不会生效的，你应该通过 JavaScript 在组件的 data 选项中声明初始值。
注意二：v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件，具体体现我们在表单 修饰符小节，给大家说明：
- text 和 textarea 元素使用 value 属性和 input 事件（内部监听 input 事件）；
- checkbox 和 radio 使用 checked 属性和 change 事件（内部监听 change 事件）；
- select 字段将 value 作为 prop 并将 change 作为事件（内部监听 change 事件）。
说明： change 和 input 区别就是，input 实时更新数据，change 不是实时更新。
input 监听
change 监听
带着注意事项，进入 Vue 表单处理学习。
文本
直接为文本绑定 v-model 指令，在 data 数据项中声明绑定数据项，可以轻松完成双向数据绑定。让我们来看看神奇的 v-model 指令。
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>syl-vue-test</title> <!-- 引入 vue.js --> <script src="vue.min.js"></script> </head> <body> <div id="app"> <input v-model="msg" placeholder="请输入..." /> <p>输入的是: {{ msg }}</p> </div> <script> var app = new Vue({ el: "#app", data: { msg: "", }, }); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
运行结果：
多行文本
多行文本和文本用法相同，使用 v-model 指令，在实例 data 中声明绑定的 message 数据项，即可完成多行文本数据双向绑定。
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>vue</title> <script src="vue.min.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> var vue = new Vue({ el: "#app", data() { return { message: "", }; }, }); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
运行效果：
单选按钮
将单选按钮绑定到同一个 picked，即可完成数据绑定，当第一个单选被选中 picked 的值为第一个单选按钮的 value，同样当第二个单选被选中 picked 的值为第二个单选按钮的 value。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>vue</title> <script src="vue.min.js"></script> </head> <body> <div id="app"> <!-- 将单选按钮绑定到同一个 picked --> <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> <script> var vue = new Vue({ el: "#app", data() { return { picked: "", }; }, }); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
运行效果：
复选框
复选框绑定的是一个布尔值（true or false），同样在复选框元素上使用 v-model 指令，在实例 data 中声明 checked，即可完成复选框数据的双向绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
</div>
<script>
// 绑定布尔值
var vue = new Vue({
el: "#app",
data() {
return {
checked: false,
};
},
});
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
运行结果：
多个复选框
通常开发中，会用到多个复选框，那么我们就需要把复选框，绑定到同一个数组，方便数据收集。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>vue</title> <script src="vue.min.js"></script> </head> <body> <div id="app"> <input type="checkbox" id="syl1" value="syl1" v-model="checkedNames" /> <label for="syl1">syl1</label> <input type="checkbox" id="syl2" value="syl2" v-model="checkedNames" /> <label for="syl2">syl2</label> <input type="checkbox" id="syl3" value="syl3" v-model="checkedNames" /> <label for="syl3">syl3</label> <br /> <span>Checked names: {{ checkedNames }}</span> </div> <script> var vue = new Vue({ el: "#app", data() { return { checkedNames: [], }; }, }); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
运行结果：
选择框
在 select 元素上使用 v-model 指令，可以绑定当前选中的 option。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- select 标签是绑定 数据项 selected -->
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script>
var vue = new Vue({
el: "#app",
data() {
return {
selected: "",
};
},
});
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
运行结果：
点击查看代码
<details>
<summary>点击查看代码</summary>
- [ ]
</details>