Vue.jsで数値を入力するだけで計算するWebアプリを作ってみた

仕様

今回は私がHTMLやCSSを書く時にレスポンシブ表示で使う「2で割る」と「表示画像の高さ ÷ 表示画像の幅 × 100」を数値を入れると、それぞれすぐに計算をしてくれるものにしました。

入力した値はそのコーディング中はまた見るかもしれないので、「数値を残す」ボタンを押すと履歴として残せるようにしています。ただ長く残すものでもないので、リロードやウインドウを閉じると履歴は消えます。

履歴は計算した順に並びますが、前に計算した値をまた見たくなった時にパっと見つけやすいように最初に入力した値で昇順に並び替えることが出来ます。

• CSSで使う計算とその履歴を残すアプリ

HTML部分

計算は2つありますが、計算部分のコードが少し違うだけなので、1/2をする部分だけ抜き出します。

<section id="half">
 <h2>1/2</h2>>
 <p>入力した数値を1/2にします。</p>
 <div class="box01">
  <input type="text" name="halfNum" id="halfNum" value="" v-model="halfNum"&gt>
 </div&gt>
 <div class="result" v-text="halfResultNum"></div>
  <button @click="addHalf()">数値を残す</button>
  <div class="leave">
   <button @click="sortHalf()">↓残した値を最初の値でソート↓</button>
   <p>リロードすると消えるので注意</p>
   <ul class="list01">
    <li v-for="num01 in halfNumLists">><span>{{num01.text01}} ÷ 2 ＝ {{num01.text02}}</span></li>
   </ul>
  </div>
</section>

HTMLタグ自体は見た目の調整が主なので気にせず、Vue.jsに関連する箇所だと、

• v-model
• v-text
• @click（v-on:clickの省略記法）
• @click（v-on:clickの省略記法）
• {{num01.text01}}
• {{num01.text02}}

になります。

js部分

var halfApp = new Vue({
 el: '#half',
 data: {
  halfNum: "",
  halfNumList: "",
  halfNumLists: []
 },
 computed: {
  halfResultNum: function() {//2で割る計算部分
  return this.halfNum / 2
  }
 },
 methods: {
  addHalf: function() {//履歴に残すのを追加する関数
  var newHalfList = this.halfResultNum;
  if (!newHalfList) {return;}
   this.halfNumLists.unshift(
    {text01: this.halfNum, text02: newHalfList}
   );
  this.halfNumList = '';
  this.halfNum = '';
 },
 sortHalf: function(){//履歴をソートする関数
 var list = this.halfNumLists;
 list.sort(function(a,b){
 if( a.text01 < b.text01 ) return -1; if( a.text01 > b.text01 ) return 1;
  return 0;
 });
}
}
})

前の記事で調べたVue.jsのAPIですが、今回使ったのは

• el：DOM要素の指定
• data：データ（今回は初期値がないので空）
• computed：入力値の計算処理をして表示
• methods：ボタンを押した時の実行したい関数

です。実際に作ってみると役割がわかりやすいです。