快捷導(dǎo)航

vue實(shí)現(xiàn)簡(jiǎn)單實(shí)時(shí)匯率計(jì)算功能

更新時(shí)間：2017年01月15日 08:36:39 作者：cheer4chai

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單實(shí)時(shí)匯率計(jì)算功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近在自己摸索vue的使用，因?yàn)橄鄬?duì)于只是去看教程和實(shí)例，感覺(jué)不如自己動(dòng)手寫一個(gè)demo入門來(lái)的快。剛好看到小程序中有一個(gè)簡(jiǎn)單但是很精致的應(yīng)用極簡(jiǎn)匯率，而且它的表現(xiàn)形式和vue的表現(xiàn)形式很像，于是想著自己搞一個(gè)簡(jiǎn)單的應(yīng)用來(lái)試試。

1、第一步是搭好簡(jiǎn)單的Html結(jié)構(gòu)

<div id="demo">
    <h1>匯率轉(zhuǎn)換</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>

2、整個(gè)頁(yè)面的邏輯就是將三個(gè)幣種的input都綁定一個(gè)model，v-model可以將這個(gè)數(shù)據(jù)傳到后臺(tái)，當(dāng)任意一個(gè)輸入框進(jìn)行輸入的時(shí)候會(huì)根據(jù)js已經(jīng)寫死的匯率計(jì)算出另外幾種幣種的數(shù)字。其中比較關(guān)鍵的是vue的computed的使用以及通過(guò)編寫數(shù)據(jù)的get和set函數(shù)達(dá)到每個(gè)數(shù)據(jù)多項(xiàng)綁定的效果。另外值得一提的是我之前也使用了vue的 $watch來(lái)實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)計(jì)算，不過(guò)在雙向綁定的實(shí)現(xiàn)中發(fā)現(xiàn)還是computed更加適用一些。

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);
       }
     }
   }
   })

3、樣式補(bǔ)充

.moneyBox{
      font-size: 20px;
      font-family: "微軟雅黑";
    }
    .moneyBox input{
      width: 100px;
      height: 24px;
      padding: 0 10px;
      margin: 0 10px;
      border-radius: 5px;
      border: 1px solid #333;
    }

因?yàn)槟康囊仓皇菫榱藢懸粋€(gè)小demo，所以簡(jiǎn)單做了一個(gè)樣式，讓頁(yè)面看起來(lái)沒(méi)那么別扭，等有時(shí)間了再優(yōu)化一下頁(yè)面的用戶體驗(yàn)再嘗試一下直接調(diào)用匯率api的數(shù)據(jù)來(lái)實(shí)現(xiàn)計(jì)算。

頁(yè)面分享