如何通过Vue指令v-model实现表单数据双向绑定？

本文共计2611个文字，预计阅读时间需要11分钟。

表单类控件承担了网页数据的录入与交互功能，本章将介绍如何使用指令v-model实现表单数据的双向绑定。6.1 基本用法

表单控件在现实业务中极为常见，例如单选、多选、下拉选择、输入等。

以下是一些基本用法示例：

- 单选：

- 多选：

- 下拉选择： Option 1 Option 2

- 输入：

表单类控件承载了一个网页数据的录入与交互，本章将介绍如何使用指令v-model完成表单的数据双向绑定。

6.1 基本用法

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。
Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。

例如下面的例子：

<div id="app"> <input type="text" v-model="message" placeholder="请输入..."> <p>输入的内容是：{{message}}</p> </div> <script> var app = new Vue({ el: "#app", data: { message: "" } }); </script>

在输入框输入的同时，{{message}}也会实时将内容渲染在视图中。