Vue3 v-model 绑定计算属性

在Vue3中，可以使用`computed`属性来实现绑定计算属性到`v-model`上。

例如，我们有一个组件中的数据`value`需要进行计算，然后将计算结果绑定到`v-model`上：

<template>
  <div>
    <input type="text" v-model="computedValue">
  </div>
</template>

<script>
import { computed, ref } from 'vue';

export default {
  name: 'MyComponent',
  setup() {
    const value = ref(5);
    const computedValue = computed({
      get() {
        return value.value * 2;
      },
      set(newValue) {
        value.value = newValue / 2;
      }
    });

    return {
      computedValue
    }
  }
}
</script>

在上面的代码中，我们使用`computed`创建了一个计算属性`computedValue`，它的`get`函数返回`value`的两倍，`set`函数将新的值除以2后赋值给`value`，这样就实现了双向绑定。

然后将`computedValue`绑定到`v-model`上，用户在输入框中输入的值就会经过计算后赋值给`value`，同时`value`的变化也会反映到输入框中。