最近在自己摸索vue的使用，因為相對于只是去看教程和實例，感覺不如自己動手寫一個demo入門來的快。剛好看到小程序中有一個簡單但是很精致的應用極簡匯率，而且它的表現形式和vue的表現形式很像，于是想著自己搞一個簡單的應用來試試。

1、第一步是搭好簡單的Html結構

匯率轉換

cny人民幣￥usd美元$hkd港幣$

2、整個頁面的邏輯就是將三個幣種的input都綁定一個model，v-model可以將這個數據傳到后臺，當任意一個輸入框進行輸入的時候會根據js已經寫死的匯率計算出另外幾種幣種的數字。其中比較關鍵的是vue的computed的使用以及通過編寫數據的get和set函數達到每個數據多項綁定的效果。另外值得一提的是我之前也使用了vue的 $watch來實現數據的實時計算，不過在雙向綁定的實現中發現還是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、樣式補充.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;

}

因為目的也只是為了寫一個小demo，所以簡單做了一個樣式，讓頁面看起來沒那么別扭，等有時間了再優化一下頁面的用戶體驗再嘗試一下直接調用匯率api的數據來實現計算。

頁面分享

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支PHP中文網。

更多vue實現簡單實時匯率計算功能相關文章請關注PHP中文網！

本文原創發布php中文網，轉載請注明出處，感謝您的尊重！

總結

以上是生活随笔為你收集整理的用php做一个简单的汇率,vue实现简单实时汇率计算功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。