vuejs3.0 从入门到精通——Vue语法——双向绑定（v-model）

双向绑定（v-model）

v-module 和 v-show 是 vue 核心功能中的内置指令。（https://cn.vuejs.org/api/built-in-directives.html#v-model）

v-model 为可输入元素（input&textarea）创建双向数据绑定。

v-model 会根据使用的元素类型自动使用对应的 DOM 属性和事件组合。

• 期望的绑定值类型：根据表单输入元素或组件输出的值而变化
• 仅限：
  • <input>
  • <select>
  • <textarea>
  • components
• 修饰符：
• .lazy - 监听 change 事件而不是 input
• .number - 将输入的合法符串转为数字
• .trim - 移除输入内容两端空格

一、表单输入绑定

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

?

1 2 3

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

让我们看看 v-model 指令如何简化了这一步骤：

?

1	<input v-model="text">

• • 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
  • <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
  • <select> 会绑定 value property 并侦听 change 事件。

注意：

https://cn.vuejs.org/guide/essentials/forms.html

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用响应式系统的 API 来声明该初始值。

 1.1、基本用法

下面先演示 单行文、多行文本、复选框、单选按钮、选择器（单个/多个），值绑定、选择器选项 的绑定方法（ vue 官网一个个讲，太麻烦，我一个案例梭哈全部了）