Vue 使用v-model

在 Vue 中，v-model 是一个指令，用于实现表单元素和应用程序状态之间的双向数据绑定。具体来说，在一个表单元素上使用 v-model 指令，可以将该表单元素的值与 Vue 实例中的数据属性绑定在一起，当表单元素的值发生变化时，Vue 会自动更新数据属性的值，反之亦然。

例如，以下代码片段展示了使用 v-model 绑定一个文本输入框的值：

<template>
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="name">
    <p>Hello, {{ name }}!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
    };
  },
};
</script>

在上述例子中，name 属性被绑定到文本输入框的值，所以当用户在文本输入框中输入内容时，name 的值也会随之改变，最终在模板中使用插值语法来显示用户输入的内容。