v-model绑定计算属性

v-model 绑定计算属性可以通过使用计算属性的 get 和 set 方法来实现。下面是一个示例：

<template>
  <div>
    <input v-model="fullName">
    <p>First Name: {{ firstName }}</p>
    <p>Last Name: {{ lastName }}</p>
  </div>
</template>

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

在这个示例中，我们使用了 `v-model` 来绑定一个输入框的值到 `fullName` 计算属性。`fullName` 计算属性的 `get` 方法返回 `firstName` 和 `lastName` 的组合，而 `set` 方法在输入框的值改变时将新的值分割成 `firstName` 和 `lastName` 并分别赋值给对应的数据属性。

这样，无论是在输入框中改变 `fullName` 的值还是在代码中改变 `firstName` 或 `lastName` 的值，都会同步更新视图和数据。