vue表单输入数据绑定详解
title:表单输入绑定type:guideorder:10表单输入绑定基础用法你可以用v-model指令在表单、及``元素上创建双向数据绑定。它会根据控件类型自动选取正确的
title: 表单输入绑定
type: guide
order: 10
表单输入绑定
基础用法
你可以用 v-model
指令在表单 <input>
、<textarea>
及 <select>
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
brv-model
会忽略所有表单元素的 value
、checked
、selected
特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data
选项中声明初始值。
v-model
在内部使用不同的属性为不同的输入元素并抛出不同的事件:
- text 和 textarea 元素使用
value
属性和input
事件; - checkbox 和 radio 使用
checked
属性和change
事件; - select 字段将
value
作为 prop 并将change
作为事件。
v-model
不会在输入法组合文字过程中得到更新。如果你想处理这个过程,请使用 input
事件。
文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本
``` html
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines">
相关文章
发表评论
评论列表
- 这篇文章还没有收到评论,赶紧来抢沙发吧~