用php做一个简单的汇率,vue实现简单实时汇率计算功能
最近在自己摸索vue的使用，因?yàn)橄鄬τ谥皇侨タ唇坛毯蛯?shí)例，感覺不如自己動手寫一個(gè)demo入門來的快。剛好看到小程序中有一個(gè)簡單但是很精致的應(yīng)用極簡匯率，而且它的表現(xiàn)形式和vue的表現(xiàn)形式很像，于是想著自己搞一個(gè)簡單的應(yīng)用來試試。
1、第一步是搭好簡單的Html結(jié)構(gòu)
匯率轉(zhuǎn)換
cny人民幣￥usd美元$hkd港幣$2、整個(gè)頁面的邏輯就是將三個(gè)幣種的input都綁定一個(gè)model，v-model可以將這個(gè)數(shù)據(jù)傳到后臺，當(dāng)任意一個(gè)輸入框進(jìn)行輸入的時(shí)候會根據(jù)js已經(jīng)寫死的匯率計(jì)算出另外幾種幣種的數(shù)字。其中比較關(guān)鍵的是vue的computed的使用以及通過編寫數(shù)據(jù)的get和set函數(shù)達(dá)到每個(gè)數(shù)據(jù)多項(xiàng)綁定的效果。另外值得一提的是我之前也使用了vue的 $watch來實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)計(jì)算，不過在雙向綁定的實(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，所以簡單做了一個(gè)樣式，讓頁面看起來沒那么別扭，等有時(shí)間了再優(yōu)化一下頁面的用戶體驗(yàn)再嘗試一下直接調(diào)用匯率api的數(shù)據(jù)來實(shí)現(xiàn)計(jì)算。
頁面分享
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支PHP中文網(wǎng)。
更多vue實(shí)現(xiàn)簡單實(shí)時(shí)匯率計(jì)算功能相關(guān)文章請關(guān)注PHP中文網(wǎng)！
本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請注明出處，感謝您的尊重！
總結(jié)
以上是生活随笔為你收集整理的用php做一个简单的汇率,vue实现简单实时汇率计算功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： su字开头的成语有哪些啊？
- 下一篇： php跨域访问java,案例：PHP A