<commit_before>---
title: Form Input Bindings
type: guide
order: 10
---

## Basic Usage
## 基本用法
You can use the `v-model` directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.
你可以使用 `v-model` 指令在表单 input 和 textarea 元素上创建双向数据邦定，Vue会选择正确的方法根据控件的类型自动更新相应的元素。尽管这看起来很神奇，`v-model` 实际上是基于用户输入事件更新数据的语法糖，并对极端的情况给予特殊处理。
<p class="tip">`v-model` doesn't care about the initial value provided to an input or a textarea. It will always treat the Vue instance data as the source of truth.</p>

### Text

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

{% raw %}
<div id="example-1" class="demo">
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p><commit_msg>add \ for input and textarea tag<commit_after>---
title: Form Input Bindings
type: guide
order: 10
---

## Basic Usage
## 基本用法
You can use the `v-model` directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.
你可以使用 `v-model` 指令在表单`input`和`textarea`元素上创建双向数据邦定，Vue会选择正确的方法根据控件的类型自动更新相应的元素。尽管这看起来很神奇，`v-model` 实际上是基于用户输入事件更新数据的语法糖，并对极端的情况给予特殊处理。
<p class="tip">`v-model` doesn't care about the initial value provided to an input or a textarea. It will always treat the Vue instance data as the source of truth.</p>

### Text

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

{% raw %}
<div id="example-1" class="demo">
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
{'fraction_non_alphanumeric': 0.11696202531645569, 'fraction_numerical': 0.0030379746835443038, 'mean_word_length': 4.916167664670659, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, 'https://': 0, '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': '3993051', 'n_tokens_mistral': 739, 'n_tokens_neox': 747, 'n_words': 250}