v-model详细用法

`v-model` 是 Vue.js 的一个指令，通常用于实现表单输入和数据双向绑定的功能。它可以将表单控件的值与 Vue 实例中的数据进行绑定，当表单控件的值发生变化时，Vue 实例中的数据也会随之更新，反之亦然。

`v-model` 可以应用在各种表单控件上，例如 `input`、`textarea`、`select` 等。

下面是 `v-model` 的详细用法：

### 1. 绑定数据

使用 `v-model` 绑定一个数据：

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

上面的代码将输入框的值与 Vue 实例中的 `message` 数据进行绑定。

### 2. 绑定计算属性

可以使用 `v-model` 绑定一个计算属性：

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

<script>
  new Vue({
    el: "#app",
    data: {
      firstName: "John",
      lastName: "Doe"
    },
    computed: {
      fullName: {
        get() {
          return this.firstName + " " + this.lastName;
        },
        set(value) {
          // 将完整的名字分割成姓和名
          var parts = value.split(" ");
          this.firstName = parts[0];
          this.lastName = parts[1];
        }
      }
    }
  });
</script>

上面的代码将输入框的值与计算属性 `fullName` 进行绑定，当输入框的值发生变化时，`fullName` 的 `set` 方法会被触发，从而更新 `firstName` 和 `lastName`。

### 3. 绑定组件

可以使用 `v-model` 绑定一个组件：

<custom-input v-model="message"></custom-input>

<script>
  Vue.component("custom-input", {
    props: ["value"],
    template: `
      <div>
        <input :value="value" @input="$emit('input', $event.target.value)" type="text">
      </div>
    `
  });

  new Vue({
    el: "#app",
    data: {
      message: "hello world"
    }
  });
</script>

上面的代码将自定义组件 `custom-input` 的值与 Vue 实例中的 `message` 数据进行绑定，这里需要注意的是，组件内部必须使用 `props` 属性接收 `value`，同时使用 `$emit('input', $event.target.value)` 将输入框的值传递给父组件。