表单输入绑定

简介: 表单输入绑定

在前端处理表单时,我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦:

<input
  :value="text"
  @input="event => text = event.target.value">

v-model 指令帮我们简化了这一步骤:

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 会忽略任何表单元素上初始的 valuecheckedselected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用响应式系统的 API来声明该初始值。

相关文章
|
3月前
表单的构成与创建、属性
表单的构成与创建、属性。
26 5
|
3月前
表单的构成与创建
表单的构成与创建。
21 2
|
4月前
|
JavaScript 前端开发
Next js:点击登录显示登录表单,点击注册显示注册表单的功能
本文提供了一个Next.js中使用React状态管理实现点击按钮切换显示登录和注册表单的功能示例,包括创建`authform.tsx`组件和在页面组件中引入使用的方法。
|
6月前
|
JSON 开发工具 数据格式
大世界项目29----文章分类——添加分类-表单准备和对话框关闭重置表单
大世界项目29----文章分类——添加分类-表单准备和对话框关闭重置表单
|
6月前
|
JavaScript 开发工具 git
大事件项目28文章分类—添加分类--表单准备和对话框关闭重置表单
大事件项目28文章分类—添加分类--表单准备和对话框关闭重置表单
|
6月前
绑定表单
【6月更文挑战第13天】绑定表单。
32 3
|
7月前
|
JavaScript
表单输入绑定 值绑定
表单输入绑定 值绑定
|
7月前
|
iOS开发
表单输入绑定 基本用法
表单输入绑定 基本用法
|
7月前
表单输入绑定 修饰符
表单输入绑定 修饰符
|
7月前
|
前端开发
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现