首页> 基础笔记 >Vue学习笔记 >基础和指令 基础和指令
vue表单输入绑定v-model--介绍
作者：小萝卜 2024-03-10 【 Vue 】 浏览 611
简介在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：
表单输入绑定
在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：
<input
:value="text"
@input="event => text = event.target.value">
v-model 指令帮我们简化了这一步骤：
<input v-model="text">
另外，v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：
文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
<input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
<select> 会绑定 value property 并侦听 change 事件。
注意
v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用来声明该初始值。
很赞哦！ (0)
下一篇：vue侦听器watch介绍
