Vue implementiert eine einfache Echtzeit-Wechselkursberechnungsfunktion

Ich habe mich kürzlich selbst mit der Verwendung von Vue beschäftigt, da ich das Gefühl habe, dass es im Vergleich zum bloßen Ansehen von Tutorials und Beispielen nicht so schnell geht wie das Schreiben einer Demo, um loszulegen. Ich habe zufällig eine einfache, aber exquisite Anwendung des minimalistischen Wechselkurses im Miniprogramm gesehen, deren Ausdrucksform der von Vue sehr ähnlich ist, also habe ich darüber nachgedacht, selbst eine einfache Anwendung zu erstellen, um sie auszuprobieren.

1. Der erste Schritt besteht darin, eine einfache HTML-Struktur einzurichten

<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. Die Logik der gesamten Seite besteht darin, die Eingaben der drei zu binden Währungen Ein Modell, V-Modell, kann diese Daten in den Hintergrund übertragen. Wenn ein beliebiges Eingabefeld eingegeben wird, werden die Zahlen mehrerer anderer Währungen basierend auf den in js fest codierten Wechselkursen berechnet. Die wichtigsten sind die Verwendung von Berechnungen in Vue und die Wirkung mehrerer Bindungen für alle Daten durch Schreiben der Get- und Set-Funktionen der Daten. Erwähnenswert ist auch, dass ich auch $watch von vue verwendet habe, um die Echtzeitberechnung von Daten zu implementieren, aber bei der Implementierung der bidirektionalen Bindung habe ich festgestellt, dass die Berechnung besser geeignet ist.

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. Stilergänzung

.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;
    }

Da der Zweck nur darin besteht, eine kleine Demo zu schreiben, habe ich einfach einen Stil erstellt , damit die Seite nicht so umständlich aussieht. Wenn Sie Zeit haben, können Sie die Benutzererfahrung der Seite optimieren und versuchen, die Wechselkurs-API-Daten direkt aufzurufen, um die Berechnung durchzuführen.

Seitenfreigabe

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich sein wird, und ich hoffe auch, dass es für alle hilfreich sein wird Unterstützen Sie die chinesische PHP-Website.

Weitere Artikel zur einfachen Echtzeit-Wechselkursberechnungsfunktion von vue finden Sie auf der chinesischen PHP-Website!