文章目录
- 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
