用vue的watch监听属性实现汇率的实时转换，可以自主选择将人民币转换美元或者欧元，并且实时输出转换后的结果

在Vue中可以使用watch监听属性的变化，当属性发生变化时，watch会触发相应的回调函数，我们可以在这个回调函数中进行汇率的实时转换。

首先，我们需要在data中定义两个属性：currency和exchangeRate，currency表示当前选择的货币类型，exchangeRate表示当前的汇率。

然后，我们可以使用computed计算属性来实时计算转换后的金额。在computed中，我们可以根据当前选择的货币类型和汇率来计算转换后的金额。

最后，在watch中监听currency和exchangeRate的变化，当发生变化时，我们可以重新计算转换后的金额，并将结果输出到页面。

示例代码如下：

<template>
  <div>
    <div>
      <label>人民币：</label>
      <input type="text" v-model="cny" @input="updateCny" />
    </div>
    <div>
      <label>货币类型：</label>
      <select v-model="currency">
        <option value="USD">美元</option>
        <option value="EUR">欧元</option>
      </select>
    </div>
    <div>
      <label>汇率：</label>
      <input type="text" v-model="exchangeRate" />
    </div>
    <div>
      <label>{{ currency }}：</label>
      <input type="text" v-model="converted" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cny: 0,
      currency: 'USD',
      exchangeRate: 0,
    };
  },
  computed: {
    converted() {
      if (this.currency === 'USD') {
        return (this.cny / this.exchangeRate).toFixed(2);
      } else if (this.currency === 'EUR') {
        return (this.cny / this.exchangeRate * 0.8).toFixed(2);
      }
    },
  },
  watch: {
    currency() {
      this.updateConverted();
    },
    exchangeRate() {
      this.updateConverted();
    },
  },
  methods: {
    updateCny() {
      this.updateConverted();
    },
    updateConverted() {
      this.converted = this.converted;
    },
  },
};
</script>

在上面的示例代码中，我们使用了v-model指令来将页面上的输入框和data中的属性进行双向绑定，当输入框的值发生变化时，对应的data属性也会发生变化。

在computed中，我们根据当前选择的货币类型和汇率来计算转换后的金额，并使用toFixed方法将结果保留两位小数。

在watch中，我们监听了currency和exchangeRate的变化，并在回调函数中重新计算转换后的金额。

在updateCny和updateConverted方法中，我们将转换后的金额重新赋值给converted属性，这样可以触发页面的重新渲染，将转换后的结果输出到页面上。