货币兑换

简介

此示例演示如何使用 amp-bind 在选择下拉列表中的选项时过滤 JSON 数据。

设置

我们包含 amp-bind 来跟踪状态

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

实现

此示例使用公共货币端点来填充 amp-state。默认值为 EUR（欧元），当用户将下拉列表更改为其他货币时，我们会通过更新 amp-state 来转换货币值。

香蕉

EUR 2.00

<amp-state id="currencyFilter" src="https://api.exchangeratesapi.io/latest"></amp-state>
<amp-state id="defState">
  <script type="application/json">
    {
      "currencyRate": 1,
      "currencyDecimal": 2,
      "currencyCode": "EUR"
    }
  </script>
</amp-state>
<select on="change:AMP.setState({
              defState: {
                currencyRate: event.value == 'EUR' ? 1 : currencyFilter.rates[event.value], 
                currencyCode: event.value
              }
            })">
  <option value="CAD">CAD</option>
  <option value="EUR" selected>EUR</option>
  <option value="HKD">HKD</option>
  <option value="ISK">ISK</option>
  <option value="USD">USD</option>
  <option value="GBP">GBP</option>
  <option value="RUB">RUB</option>
  <option value="INR">INR</option>
</select>
  <h3>Banana</h3>
  <div>
    <span [text]="defState.currencyCode">EUR</span>
    <span [text]="(2*defState.currencyRate).toFixed(defState.currencyDecimal)">2.00</span>
  </div>  
  <amp-img src="https://cdn.glitch.com/cbcdd9ba-70f9-4d53-a19d-486e4b70f73f%2F440px-Cavendish_Banana_DS.jpg?v=1578089065672" height="112" width="112" layout="fixed" title="banana"></amp-img>

需要进一步解释吗？

如果此页面上的说明未涵盖您所有的问题，请随时与其他 AMP 用户联系，讨论您的具体用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的长期参与者，但我们也欢迎您对您特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @philkrie 编写