帮我用uniapp实现切换输入汇率的功能

以下是一个简单的UniApp示例代码，演示如何实现切换输入汇率的功能：

<template>
  <view class="container">
    <view class="header">
      <text class="title">汇率转换器</text>
      <button class="switch-btn" @click="switchCurrencies">{{ fromCurrency }}/{{ toCurrency }}</button>
    </view>
    <view class="content">
      <input type="number" v-model="amount" class="input" placeholder="请输入金额">
      <text class="result">{{ result }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      amount: '',
      fromCurrency: 'CNY',
      toCurrency: 'USD',
      exchangeRate: 0.15, // 初始汇率
    }
  },
  computed: {
    result() {
      return (this.amount * this.exchangeRate).toFixed(2)
    }
  },
  methods: {
    switchCurrencies() {
      // 交换输入汇率
      const temp = this.fromCurrency
      this.fromCurrency = this.toCurrency
      this.toCurrency = temp

      // TODO: 根据新的输入汇率获取汇率数据并更新 exchangeRate
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.switch-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 16px;
  cursor: pointer;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.input {
  width: 80%;
  height: 50px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.result {
  font-size: 24px;
  font-weight: bold;
}
</style>

在该示例中，我们使用了一个 `switchCurrencies` 方法来交换输入汇率。在该方法中，我们可以通过调用汇率 API 来获取新的汇率数据，并更新 `exchangeRate` 变量。然后，我们在模板中使用 `$watch` 监听 `fromCurrency` 和 `toCurrency` 的变化，以便在它们改变时自动更新汇率。