表单输入绑定

简介: 表单输入绑定

在前端处理表单时,我们常常需要将表单输入框的内容同步给 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月前
|
JavaScript 数据安全/隐私保护
Vue中如何使用过滤器来隐藏手机号、邮箱等字符串的中间部分内容
这篇文章介绍了在Vue中如何使用过滤器来隐藏手机号和邮箱等字符串的中间部分内容,以提高隐私保护。文章展示了实现效果,并提供了实现过程的代码示例,包括HTML部分的绑定、data部分的数据定义和script部分的过滤器定义。文章还解释了过滤器的概念、语法和使用方式,并提供了一个外部链接供读者获取更加详细的过滤器知识。
|
2月前
表单的构成与创建
表单的构成与创建。
16 2
|
5月前
|
JSON 开发工具 数据格式
大世界项目29----文章分类——添加分类-表单准备和对话框关闭重置表单
大世界项目29----文章分类——添加分类-表单准备和对话框关闭重置表单
|
5月前
|
JavaScript 开发工具 git
大事件项目28文章分类—添加分类--表单准备和对话框关闭重置表单
大事件项目28文章分类—添加分类--表单准备和对话框关闭重置表单
|
5月前
绑定表单
【6月更文挑战第13天】绑定表单。
28 3
|
6月前
|
JavaScript
表单输入绑定 值绑定
表单输入绑定 值绑定
|
6月前
|
iOS开发
表单输入绑定 基本用法
表单输入绑定 基本用法
|
6月前
表单输入绑定 修饰符
表单输入绑定 修饰符
|
6月前
|
前端开发
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
|
Java Maven 数据安全/隐私保护
一个简单的自定义输入框
今天还是一篇关于自定义View相关的,带来一个大众的,常见的一个输入框,很多的场合下都能遇到,比如验证码,密码框等等,配置了很多常见的属性,可以满足不同场合下的需求,矩形框,圆角框,下划线等等均可满足,长度设置,光标选择,背景选择,均可控制。