Svelte中如何渲染API获取的汇率数据？

步骤1：声明响应式变量 #

在Svelte中，需要用let声明响应式变量存储汇率数据和选中的货币，确保数据更新时页面自动同步：

<script>
  // 假设BASE_URL已提前定义
  let conversionRates = {};
  let selectedCurrency = 'USD'; // 默认选中美元

  async function getCurrencies() {
    const response = await fetch(BASE_URL);
    const data = await response.json();
    // 将API返回的汇率赋值给响应式变量
    conversionRates = data.conversion_rates;
  }

  getCurrencies();
</script>

步骤2：动态渲染页面元素 #

利用Svelte的{#each}遍历语法生成下拉选项，通过双向绑定关联选中状态与汇率显示：

<div class="currency-input">
  <!-- 显示当前选中货币的汇率 -->
  <input 
    type="number" 
    min="0" 
    value={conversionRates[selectedCurrency]} 
    readonly 
  />
  <!-- 动态生成所有货币选项 -->
  <select bind:value={selectedCurrency}>
    {#each Object.entries(conversionRates) as [code, rate]}
      <option value={code}>{code}</option>
    {/each}
  </select>
</div>

关键细节说明 #

• Object.entries(conversionRates)把汇率对象转为[货币代码, 汇率]格式的数组，方便遍历生成选项
• bind:value={selectedCurrency}实现下拉框选中值与变量的双向绑定，选中切换时selectedCurrency自动更新
• input的value绑定conversionRates[selectedCurrency]，会自动同步显示当前选中货币的汇率；添加readonly可防止用户手动修改汇率（按需移除）
• 由于conversionRates是响应式变量，API数据加载完成后，页面会自动渲染所有货币选项及对应汇率

内容的提问来源于stack exchange，提问作者Vladimiro Antipin