最近在自己摸索vue的使用,因為相對於只是去看教程和實例,感覺不如自己動手寫一個demo入門來的快。剛好看到小程式中有一個簡單但是很精緻的應用極簡匯率,而且它的表現形式和vue的表現形式很像,於是想著自己搞一個簡單的應用來試試。
1、第一步是搭好簡單的Html結構
<div id="demo"> <h1>汇率转换</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、整個頁面的邏輯就是將三個幣種的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中文網!