云迈博客

您现在的位置是:首页 > 前端技术 > Vue > 正文

Vue

vue表单输入数据绑定详解

俗人将庸2020-11-26Vue286
title:表单输入绑定type:guideorder:10表单输入绑定基础用法你可以用v-model指令在表单、及``元素上创建双向数据绑定。它会根据控件类型自动选取正确的

title: 表单输入绑定
type: guide

order: 10

表单输入绑定

基础用法

你可以用 v-model 指令在表单 <input><textarea><select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
br
v-model 会忽略所有表单元素的 valuecheckedselected 特性的初始值而总是将 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">

发表评论

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~