<commit_before>---
title: 表单控件绑定
type: guide
order: 10
---

## 基础用法

你可以用 `v-model` 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 `v-model` 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

<p class="tip"> `v-model` 会忽略所有表单元素的 `value`、`checked`、`selected` 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 `data` 选项中声明初始值。</p>

<p class="tip" id="vmodel-ime-tip">对于要求 [IME](https://en.wikipedia.org/wiki/Input_method) (如中文、 日语、 韩语等) 的语言，你会发现那`v-model`不会在 ime 构成中得到更新。如果你也想实现更新，请使用 `input`事件。</p>

### 文本

``` html
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
```
<commit_msg>Update forms.md<commit_after>---
title: 表单控件绑定
type: guide
order: 10
---

## 基础用法

你可以用 `v-model` 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 `v-model` 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

<p class="tip"> `v-model` 会忽略所有表单元素的 `value`、`checked`、`selected` 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 `data` 选项中声明初始值。</p>

<p class="tip" id="vmodel-ime-tip">对于要求 [IME](https://en.wikipedia.org/wiki/Input_method) (如中文、 日语、 韩语等) (IME意为'输入法’)的语言，你会发现`v-model`不会在 ime 输入中得到更新。如果你也想实现更新，请使用 `input`事件。</p>

### 文本

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

{'fraction_non_alphanumeric': 0.1902834008097166, 'fraction_numerical': 0.0032388663967611335, 'mean_word_length': 6.58282208588957, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1641478', 'n_tokens_mistral': 782, 'n_tokens_neox': 834, 'n_words': 93}