2017-04-28

Vue.js で年齢をリアルタイム計算(lodashで遅延処理も)

久しぶりの更新です。
今人気が上がってきている Vue.js のウォッチャの勉強したので、まとめておこうと思います。

デモページ


では、まずやり方を以下の2点で説明します。

1.HTML 部分
2.JavsScript 部分


1.HTML 部分

基本的には <input>タグが2つあるだけです。

 <input v-model="birthdate">  
 <input v-model="age">  

特徴は v-model という Vue の命令が入っているだけです。
そして、この中で指定されている「birthdate」「age」という名前が JavaScript 部分で使う変数名になり、birthdate がウォッチャで監視されることになります。

2.JavaScript 部分

     var vm = new Vue({  
       el: '#demo',  
       data: {  
         birthdate: '',  
         age: 0
       },  
       watch: {  
         birthdate: function(val) {  
           this.age = this.calcAge(val);
         }  
       },  
       methods: {  
         calcAge: function(birthdate) {  
           var ageDifMs = Date.now() - birthdate.getTime();  
           var ageDate = new Date(ageDifMs);  
           return ageDate.getUTCFullYear() - 1970;  
         }  
       }  
     })  


とてもとてもシンプルにしたのでデモページのコードとは違っていますが、内容としては次のようになります。

1.data 内は、これから必要になる変数。ということで、さきほど HTML 部分で指定した「birthdate」「age」の2つを設置しましょう。v-model を使用しているので変更があったらリアルタイムでこの中身が更新されます。

2.そして、watch で変数に変化が起こっていないかを監視します。今回は誕生日が変更になったことを知りたいので「birthdate」の中で年齢を計算&変更します。

ちなみに

デモページでは lodash と呼ばれる便利機能をたくさん提供してくれる JavaScript パッケージを使って遅延処理を行っています。(この方が計算してるぞ!感がでるので(笑))

実際には以下のようにします。

 _.delay(function(birthdate) {  
   // ここが0.35秒後に呼ばれる  
 }, 350, val);  

そして、指定時間を待っている間は「enteringFlag」を切り替えることで、「計算中...」というテキストを(表示/非表示)しています。


終わりに

状況によって jQuery を使うほうがスマートな場合もありますが、やはり Vue はなにかと便利です。(^^)
 ではでは。