貨幣換算

簡介

此範例示範如何使用 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