Vue2（12） 表单输入绑定学习笔记
文章目录
-
-
- Vue2 表单输入绑定学习笔记
-
- 一、引言
- 二、基础用法
-
- 1. 文本输入
- 2. 复选框
- 3. 单选按钮
- 4. 选择框
- 三、修饰符
- 四、特殊场景
- 五、总结
-
Vue2 表单输入绑定学习笔记
一、引言
在Vue2中，表单输入绑定是一个核心功能，它允许我们在表单元素（如<input>、<textarea>和<select>）与Vue实例的数据之间创建双向绑定。这种绑定不仅简化了数据同步，还提高了应用的响应性和用户体验。本文将基于Vue2的官方文档，详细阐述表单输入绑定的基础用法、修饰符、特殊场景，并提供代码示例。
二、基础用法
1. 文本输入
对于<input>和<textarea>元素，v-model使用value属性和input事件进行绑定。
<div id="app">
<input v-model="message" placeholder="edit me">
<p>Message is: {
{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<p>Multiline message is: {
{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
2. 复选框
对于<input type="checkbox">，v-model使用checked属性和change事件进行绑定。
- 单个复选框绑定到布尔值：
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{
{ checked }}</label>
</div>
<script>
new Vue({
el: '#app',
data: {
checked: false
}
});
</script>
- 多个复选框绑定到同一个数组：
<div id="app">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for