V-model实现双向数据绑定

一、v-model

v-model是Vue.js框架中的一个指令，用于实现数据的双向绑定。可以将表单元素的值与Vue实例的数据属性绑定，实现数据的响应式更新。

当使用v-model指令时，它会自动根据表单元素的类型（例如 input、select、textarea等）来决定监听哪种事件用于更新数据。同时，它也会根据Vue实例中的数据属性的值来为表单元素设置初始值。

v-model其实是一个语法糖，他背后的本质上是包含两个操作：
1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件

注意：

• 双向绑定, 只能绑定文本框、单选按钮、复选框、文本域、下拉列表等
• 文本框/单选按钮/文本域, 绑定的数据是字符串类型
• 单个复选框, 绑定的是Boolean类型
• 多个复选框, 绑定的是数组
• select单选对应字符串，多选对应也是数组

二、v-model的使用

1、绑定文本框

代码：

效果：