Vue.jsの入門書を読み始めた話 その3
こんにちは。ケリーの姉です。 今回はv-modelという仕組みについてのお話です。
v-model?
双方向データバインディングを行ってくれる指示方法です。 えっと、言葉が難しいなぁ・・・ 入力フォームに値を入れると、ページ上にそれが即反映されたりするページとか、見たことありますよね? それを簡単に実現できるのがv-modelです。 とりあえず、コードを書いてみましょう。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Hello! Vue.js World</title> </head> <body> <div id="app"> <h1>Hello!{{ msg1 }}World!!</h1> <p>ようこそ{{ msg1 }}の世界へ。</p> <p>世界の名前を変えてみる?→<input type="text" name="inStr" v-model="msg1" /></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="./js/changeWorld.js"></script> </body> </html>
inputタグに「 v-model="msg1"」という、双方向バインディングを指定しました。 これでinputタグの入力値とmsg1プロパティがお互い同期するようになります。 そしてjsファイル
changeWorld.js
var app = new Vue({ el: '#app', data: { msg1: 'Vue.js' } });
こざっぱりとしてるぅー!
じゃあ、実行してみましょう。
はい、msg1に定義された文字列がinputタグの初期値として出ていますね。 じゃあ、このinputの中身を変更してみます。
お分かりいただけたでしょうか?inputの入力値によって、msg1の値が変更になる→表示内容も合わせて変わる
コレが双方向バインディングです。 これとメソッドをうまく組み合わせると、表現の幅が広がります。
回文チェッカーを作ってみよう
v-modelとメソッドを組み合わせて、入力された文字列が回文(上から読んでも下から読んでも同じ文)になっているか?を動的にチェックするページを作ってみます。
まずはhtml
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>それは回文ですか?</title> </head> <body> <div id="app"> <h1>回分チェック</h1> <p>文字列を入力→<input type="text" name="inStr" v-model.trim="inStr" /></p> <p>入力された文字は「{{inStr}}」これは・・・</p> <p>{{ kaibun() }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="./js/inputEvent.js"></script> </body> </html>
inputのv-modelが「v-model.trim="inStr"」となっていますね。inStrプロパティをバインドしています。 v-modelにtrimをつけると、前後の空白を自動消去した上でjs側に値を渡してくれますまあ便利。
んで、「kaibun()」というメソッド呼び出し部分で、inStrに入力された文字が回文か否かの結果を表示してくれます。 「kaibun()」が定義されているinputEvent.jsの中身はこんな感じです。
var app = new Vue({ el: '#app', data: { inStr: '' }, methods: { kaibun: function() { if (this.inStr.length == 0) return; var rStr = this.inStr.split('').reverse().join(''); if (this.inStr == rStr) { return '回文です!'; } else { return '回文ではありません'; } } } });
methodsにkaibunという処理が書かれています。 inStrの入力値の長さを見ており、0なら処理を行いません。 入力値が1以上の場合、split関数で文字を配列にします。「こんにちは」なら['こ', 'ん', 'に', 'ち', 'は']といった配列になります。 reverse関数は、その名のとおり「逆転」させます。['こ', 'ん', 'に', 'ち', 'は']の配列を['は', 'ち', 'に', 'ん', 'こ']に変化させます。 最後にjoin関数で配列を連結し、ひとつの文字列にします。['は', 'ち', 'に', 'ん', 'こ']を「はちにんこ」にして、rStr変数に代入します。
回文なら、最初に入力された文字列と逆転した文字列が一致するはずなので、一致したら「回文です!」しなかったら「回文ではありません」の文字を返します。 こうして返された文字が、html側のkaibun()とかかれたところに出力されるわけですね。 なるほど簡単だ。
ちなみに、実行するとこんな感じになります。
○初回起動時
○Not 回文
○回文
このように、v-modelは入力値を動的に処理させたい場合に向いています。 私の現場では、v-modelでバインドした値をTypeScriptで処理してC#に送信、非同期で帰ってきた値を戻してv-modelでバインドされた値を変える・・・という処理を多様していますね。
次回は文字列以外のバインドについて書いていこうと思います。ではまた!