双向绑定：v-model

v-model 指令是 Vue.js 中实现双向数据绑定的核心指令，它简化了数据与视图之间的同步，提高了开发效率。

• 单向绑定: 响应式数据的变化会更新dom树,但是dom树上用户的操作造成的数据改变不会同步更新到响应式数据

• 双向绑定: 响应式数据的变化会更新dom树,但是dom树上用户的操作造成的数据改变会同步更新到响应式数据

作用：

v-model 指令将一个元素的值与一个数据属性同步。这意味着：

1. 读取： 当元素的值发生变化时，v-model 会将该值同步到数据属性中。
2. 写入： 当数据属性发生变化时，v-model 会更新元素的值。

使用场景：

v-model 指令通常与以下元素配合使用：

• input: 用于文本输入、密码输入、数字输入等。
• textarea: 用于多行文本输入。
• select: 用于下拉选择。

语法：

<input type="text" v-model="message">

在这个例子中，v-model 指令将 message 数据属性绑定到 input 元素。

工作原理：

v-model 指令实际上是以下两个指令的语法糖：

• v-bind:value: 将数据属性绑定到元素的 value 属性。
• v-on:input: 将元素的 input 事件绑定到一个更新数据属性的方法。

<template>
  <div>
    <h3>文本输入</h3>
    <input type="text" v-model="textValue" placeholder="请输入文本">
    <p>输入内容：{{ textValue }}</p>

    <h3>密码输入</h3>
    <input type="password" v-model="passwordValue" placeholder="请输入密码">
    <p>密码：{{ passwordValue }}</p>

    <h3>数字输入</h3>
    <input type="number" v-model.number="numberValue" placeholder="请输入数字">
    <p>数字：{{ numberValue }}</p>

    <h3>多行文本输入</h3>
    <textarea v-model="textareaValue" placeholder="请输入多行文本"></textarea>
    <p>多行文本：{{ textareaValue }}</p>

    <h3>下拉选择</h3>
    <select v-model="selectValue">
      <option value="apple">苹果</option>
      <option value="banana">香蕉</option>
      <option value="orange">橘子</option>
    </select>
    <p>选择结果：{{ selectValue }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const textValue = ref('');
const passwordValue = ref('');
const numberValue = ref(0);
const textareaValue = ref('');
const selectValue = ref('apple');
</script>

1. 文本输入： 使用 input 标签，type 属性设置为 text，v-model 指令绑定到 textValue 数据。
2. 密码输入： 使用 input 标签，type 属性设置为 password，v-model 指令绑定到 passwordValue 数据。
3. 数字输入： 使用 input 标签，type 属性设置为 number，v-model 指令绑定到 numberValue 数据，并使用 .number 修饰符将输入值转换为数字。
4. 多行文本输入： 使用 textarea 标签，v-model 指令绑定到 textareaValue 数据。
5. 下拉选择： 使用 select 标签，v-model 指令绑定到 selectValue 数据。每个选项使用 option 标签，value 属性指定选项的值。

官方在线体验地址：Vue SFC Playground (vuejs.org)