Vue implémente une fonction simple de calcul du taux de change en temps réel

J'ai récemment exploré l'utilisation de Vue par moi-même, car comparé au simple visionnage de tutoriels et d'exemples, je pense que ce n'est pas aussi rapide que d'écrire une démo pour commencer. Il m'est arrivé de voir une application simple mais exquise du taux de change minimaliste dans le mini-programme, et sa forme d'expression est très similaire à celle de vue, alors j'ai pensé à créer moi-même une application simple pour l'essayer.

1. La première étape consiste à mettre en place une structure HTML simple

<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. devises Un modèle, v-model, peut transférer ces données en arrière-plan Lorsqu'une zone de saisie est saisie, les nombres de plusieurs autres devises seront calculés en fonction des taux de change qui ont été codés en dur dans js. Les principaux sont l'utilisation du calcul dans Vue et l'effet de plusieurs liaisons pour chaque donnée en écrivant les fonctions get et set des données. Il convient également de mentionner que j'ai également utilisé $watch de vue pour implémenter le calcul des données en temps réel, mais dans l'implémentation de la liaison bidirectionnelle, j'ai trouvé que le calcul était plus approprié.

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. Supplément de style

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

Parce que le but est juste d'écrire une petite démo, j'ai simplement fait un style. , afin que la page n'ait pas l'air si gênante. Lorsque vous avez le temps, vous pouvez optimiser l'expérience utilisateur de la page et essayer d'appeler directement les données de l'API du taux de change pour mettre en œuvre le calcul.

Partage de pages

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun, et j'espère également que tout le monde le fera. prend en charge le site Web PHP chinois.

Pour plus d'articles liés à la fonction simple de calcul du taux de change en temps réel de vue, veuillez faire attention au site Web PHP chinois !