Vueは簡単なリアルタイム為替レート計算機能を実装します

最近、自分で vue の使い方を調べています。チュートリアルやサンプルを見るだけと比べて、自分でデモを書いて始めるのはそれほど早くないように感じられるからです。たまたまミニプログラムでミニマリスト為替レートのシンプルかつ絶妙なアプリケーションを見つけ、その表現形式がvueの表現形式とよく似ていたので、自分でも簡単なアプリケーションを作って試してみることにしました。

1. 最初のステップは、単純な Html 構造をセットアップすることです

2. ページ全体のロジックは、3 つの通貨の入力をモデルにバインドすることです。任意の入力ボックスを入力すると、js で記述された為替レートに基づいて他のいくつかの通貨の数値が計算されます。主なものは、Vue での計算の使用と、データの get 関数と set 関数を記述することによる各データの複数のバインディングの効果です。また、vue の $watch を使用してデータのリアルタイム計算を実装したこともありますが、双方向バインディングの実装では、computed の方が適していることがわかりました。

<div id="demo">
    <h1>汇率转换</h1>
    <div class="moneyBox"><span>cny</span><input v-model="cny" type="text"><span>人民币￥</span></div>
    <div class="moneyBox"><span>usd</span><input v-model="usd" type="text"><span>美元$</span></div>
    <div class="moneyBox"><span>hkd</span><input v-model="hkd" type="text"><span>港币$</span></div>
  </div>

3. スタイルの補足

var CNY_USD = 6.96;
  var CNY_HKD = 0.90;
  var data={  cny:'100',
        usd:'14.38'  ,
        hkd:'111.53',
      };
  var myVue = new Vue({
   el: '#demo',
   data: data,
   computed: {
     usd:{
       get: function() {
         return (this.cny/CNY_USD).toFixed(2);
       },
       set: function(newValue) {
         this.cny = (newValue*CNY_USD).toFixed(2);
       }
     },
     hkd:{
       get: function() {
         return (this.cny/CNY_HKD).toFixed(2);
       },
       set: function(newValue) {
         this.cny = (newValue*CNY_HKD2Q).toFixed(2);
       }
     }
   }
   })

目的は単に小さなデモを書くことなので、ページの見た目を軽くするためにスタイルを作成しただけです。為替レート API データを直接呼び出して計算を実装してみます。

ページ共有

以上がこの記事の全内容です。皆様の学習に役立つことを願っております。また、皆様にも PHP 中国語 Web サイトをサポートしていただければ幸いです。

vue の簡単なリアルタイム為替レート計算機能に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。