重慶分公司
重慶分公司
vue怎么實(shí)現(xiàn)實(shí)時(shí)匯率計(jì)算功能-創(chuàng)新互聯(lián)
這篇文章將為大家詳細(xì)講解有關(guān)vue怎么實(shí)現(xiàn)實(shí)時(shí)匯率計(jì)算功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站制作、
成都外貿(mào)網(wǎng)站建設(shè)、武穴網(wǎng)絡(luò)推廣、
微信小程序開(kāi)發(fā)、武穴網(wǎng)絡(luò)營(yíng)銷、武穴企業(yè)策劃、武穴品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；
成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供
武穴建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com
為什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。
最近在自己摸索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)
匯率轉(zhuǎn)換
cny人民幣￥
usd美元$
hkd港幣$
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è)面分享
關(guān)于“vue怎么實(shí)現(xiàn)實(shí)時(shí)匯率計(jì)算功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
名稱欄目：vue怎么實(shí)現(xiàn)實(shí)時(shí)匯率計(jì)算功能-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)網(wǎng)址：http://weahome.cn/article/degddj.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
