vue 页面上有4个数据 data1 data2 data3 total ，total是data1-3的总和 怎么实现 data不管怎么改变 total都是data们的总和 方便一点的写法

在Vue.js中，你可以通过计算属性（Computed Property）来实现这个功能。计算属性允许你在组件内部定义基于其他数据的读取值，而这些值会自动随着依赖的数据变化而更新。对于你的情况，可以这样做：

<template>
  <div>
    <input v-model="data1" placeholder="data1">
    <input v-model="data2" placeholder="data2">
    <input v-model="data3" placeholder="data3">
    <p>总和：{{ total }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data1: 0,
      data2: 0,
      data3: 0,
    };
  },
  computed: {
    total() {
      return this.data1 + this.data2 + this.data3;
    },
  },
};
</script>

在这个例子中，`data1`, `data2`, 和 `data3` 是输入框的值，它们通过 `v-model` 与组件内的变量绑定。`total` 是一个计算属性，它始终返回这三者相加的结果，当这三个数据发生变化时，`total` 的值会自动更新。