快捷導(dǎo)航

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

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

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

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

1、第一步是搭好簡單的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è)頁面的邏輯就是將三個(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的使用以及通過編寫數(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue + element動(dòng)態(tài)多表頭與動(dòng)態(tài)插槽
這篇文章主要介紹了vue + element動(dòng)態(tài)多表頭與動(dòng)態(tài)插槽，下面文章圍繞vue + element動(dòng)態(tài)多表頭與動(dòng)態(tài)插槽的相關(guān)資料展開文章的內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可以參考一下，希望對(duì)大家有所幫助
2021-12-12
解決Vue-cli3沒有vue.config.js文件夾及配置vue項(xiàng)目域名的問題
這篇文章主要介紹了解決Vue-cli3沒有vue.config.js文件夾及配置vue項(xiàng)目域名的問題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-12-12
vue引入高德地圖并繪制點(diǎn)線面的方法
這篇文章主要介紹了vue引入高德地圖并繪制點(diǎn)線面的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2024-03-03
淺談Vue3.0新版API之composition-api入坑指南
這篇文章主要介紹了Vue3.0新版API之composition-api入坑指南，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定原理
這篇文章主要介紹了proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定原理,文章以介紹proxy的優(yōu)點(diǎn)開始展開全文內(nèi)容，圍繞proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定的相關(guān)資料，,需要的朋友可以參考一下
2021-12-12
詳解el Cascader懶加載數(shù)據(jù)回顯示例
這篇文章主要為大家介紹了詳解el Cascader懶加載數(shù)據(jù)回顯示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
沒有搭建腳手架時(shí)vue組件的使用方式
這篇文章主要介紹了沒有搭建腳手架時(shí)vue組件的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue中eslint導(dǎo)致的報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vue中eslint導(dǎo)致的報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue2中引入使用ElementUI的教程詳解
這篇文章主要為大家詳細(xì)介紹了Vue2中引入使用ElementUI教程的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的可以參考下
2024-03-03
Vue3+TypeScript+Vite使用require動(dòng)態(tài)引入圖片等靜態(tài)資源
本文主要介紹了Vue3+TypeScript+Vite使用require動(dòng)態(tài)引入圖片等靜態(tài)資源，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07