貨幣換算

簡介

這個範例示範如何在選取下拉式選單中的選項時，使用 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 來換算貨幣值。

Banana

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