vue 数据联动 使用computed 监听 v-model的表单某个数据

Vue.js 中的数据联动通常通过 `v-model` 和 `computed` 特性结合来实现。当你需要在页面上有一个字段依赖于其他数据的变化时，可以使用 `computed` 来创建一个计算属性。

例如，假设你有一个名为 `formInput` 的表单输入，你想当用户输入内容时另一个名为 `formattedData` 的显示值也随之更新，你可以这样做：

<!-- HTML -->
<input type="text" v-model="originalValue">
<span v-bind:text="formattedData"></span>

<script>
export default {
  data() {
    return {
      originalValue: '',
    };
  },
  computed: {
    formattedData() {
      // 计算并返回基于 originalValue 的新值
      return this.originalValue.toUpperCase();
    }
  }
};
</script>

在这个例子中，`v-model="originalValue"` 实现了输入框的内容变化会自动同步到 `originalValue` 上。而 `formattedData` 是一个计算属性，它监听 `originalValue` 的改变，并实时将输入的文本转换为大写显示。

每当 `originalValue` 变化时，`formattedData` 会自动更新，实现了两个字段之间的数据联动。