表单输入绑定 ​

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

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

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

<Input v-model="text"></Input>

另外，v-model 还可以用于各种不同类型的输入，<Dropdown>、<Select> 组件。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

• 文本类型的 <Input> 组件会绑定 value property 并侦听 input 事件；
• <Select> 会绑定 value property 并侦听 change 事件。

基本用法 ​

文本 ​

<p>Message is: {{ message }}</p>
<Input v-model="message" placeholder="edit me" /></Input>

多行文本 ​

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<Input v-model="message" 
       placeholder="add multiple lines" 
       type='textarea'>
</Input>

组件上的 v-model ​

如果你还不熟悉 Vue.py 的组件，那么现在可以跳过这个部分。

HTML 的内置表单输入类型并不总能满足所有需求。幸运的是，我们可以使用 Vue.py 构建具有自定义行为的可复用输入组件，并且这些输入组件也支持 v-model！要了解更多关于此的内容，请在组件指引中阅读配合 v-model 使用。