v-model 如何绑定多个值

v-model 指令是 Vue.js 中常用的双向数据绑定指令，可以将表单元素的值与组件实例中的数据进行双向绑定。如果需要绑定多个值，可以使用计算属性（computed）或者监听器（watcher）来实现。

下面是使用计算属性的示例：

<template>
  <div>
    <input v-model="fullName">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        firstName: '',
        lastName: ''
      }
    },
    computed: {
      fullName: {
        get() {
          return this.firstName + ' ' + this.lastName
        },
        set(value) {
          const parts = value.split(' ')
          this.firstName = parts[0]
          this.lastName = parts[1]
        }
      }
    }
  }
</script>

在这个示例中，我们将 `v-model` 绑定到了计算属性 `fullName` 上，然后在计算属性中实现了对 `firstName` 和 `lastName` 的双向绑定。当输入框中的值发生变化时，会触发 `set` 方法，然后将输入框中的值分割成两部分分别赋值给 `firstName` 和 `lastName`，从而实现了双向绑定。

使用监听器的示例：

<template>
  <div>
    <input v-model="firstName">
    <input v-model="lastName">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fullName: ''
      }
    },
    watch: {
      firstName(value) {
        this.fullName = value + ' ' + this.lastName
      },
      lastName(value) {
        this.fullName = this.firstName + ' ' + value
      }
    }
  }
</script>

在这个示例中，我们分别将 `v-model` 绑定到了 `firstName` 和 `lastName` 上，并且通过 `watch` 监听这两个值的变化，然后根据变化的值重新计算 `fullName`，从而实现了双向绑定。

需要注意的是，当使用计算属性或者监听器实现多个值的双向绑定时，需要保证每个值都能够正确地更新并且不会产生死循环。如果不小心出现了死循环，可以使用 `v-model.lazy` 或者 `v-model.defer` 来延迟或者推迟更新。