Vue 中 v-modal 的使用？

在 Vue 中，v-model 是一个用于在表单控件元素上创建双向数据绑定的指令。它可以在表单输入元素（比如 input、textarea、select）和自定义组件上创建双向绑定，将输入元素的值与 Vue 实例的数据进行关联，实现数据的自动同步。

用法示例：

1. 基本用法：

<template>
  <div>
    <!-- 使用 v-model 绑定 input 元素 -->
    <input v-model="message" type="text">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '' // 用于存储 input 元素的值
    };
  }
};
</script>

在这个例子中，v-model="message" 将 input 元素的值与 Vue 实例中的 message 数据属性进行了双向绑定。当 input 中的值发生变化时，message 数据也会更新，同时，message 数据发生变化时，input 中的值也会更新。

2. 绑定复选框（Checkbox）的例子：

<template>
  <div>
    <!-- 使用 v-model 绑定 checkbox -->
    <input v-model="checked" type="checkbox">
    <label>{{ checked }}</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false // 用于存储 checkbox 的选中状态
    };
  }
};
</script>

在这个例子中，v-model="checked" 将 checkbox 的选中状态与 Vue 实例中的 checked 数据属性进行了双向绑定。当 checkbox 被选中或取消选中时，checked 数据属性也会相应地更新。

v-model 是一个便捷的指令，能够简化表单元素和 Vue 实例数据之间的双向绑定，让开发者更轻松地处理表单输入。