【Vue.js】v-modelの基本的な使い方と、修飾子の使い方

本記事について

v-modelの挙動と、v-modelでのinputタグの値の取得のTipsを記載します。

目次

・v-modelとは
・v-modelを使ってみる
・v-modelで使う修飾子

v-modelとは

v-modelとはそもそも何なのか。
公式ドキュメントによると

form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成するには、v-model ディレクティブを使用することができます。それは、自動的に入力要素のタイプに基づいて要素を更新するための正しい方法を選択します。

とのことです。うーん、ちょっとわかりにくい。。

とりあえず、コードを書いて理解してみましょう。

v-modelを使ってみる

とても基本的な使い方ですが、まずはHTMLに下記のように書きます。

index.html

<!-- Vue.jsが読み込まれている前提 -->
<div id="app">
  <input type="text" v-model="sample_v_model" placeholder="sample_v_model"><br>
  <p>ここにsample_v_modelの値をリアルタイムに表示: {{ sample_v_model }}</p>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    sample_v_model: ''
  }
})
</script>

inputタグにv-model="sample_v_model"という記述があります。
そして、scriptタグの中身にsample_v_model: ''という記述があります。

new Vueとして、Vueインスタンスを作っているわけですが、それをマウントする先が#appで囲まれた箇所になるので、HTML側のv-model="sample_v_model"とjs側のsample_v_model: ''が紐づいているのですね。

公式ページに書いてあった、「双方向 (two-way) データバインディングを作成するには、v-model ディレクティブを使用することができます」という部分がこれに当たるのだと理解できました。

jsの方ではsample_v_modelというデータを持っていて、ページが読みこまれた表示された時にはその中身は空っぽ、そして、inputタグも空っぽという状態です。なので、ページが表示された時には

・inputタグの中身は空っぽ
・js上で定義されたデータの中身も空っぽ

ということになります。

↓こんな感じですね。

これで、v-modelの基本的な使い方を理解することができました。

v-modelで使う修飾子

今回はinputタグの中身を計算する上で数値にする必要があり、そのデータをHTML上にも反映しようとしたところ、v-forの部分でそれがうまくいかず、「100」と入力すると。「1」「0」「0」と入力されたと見なされてしまったので、その解決のためにnumber修飾子を使いました。

その実際のコードがこちらです

<div class="">
  <label for="number_of_years">運用する年数</label>
  <input type="number" v-model.number="number_of_years" placeholder="運用する年数を入力してください">年
</div>

(略)

<tr v-for="number_of_year in number_of_years">
  <th>{{ number_of_year }}年後</th>
  <td>{{ Math.round(amountOfShare * Math.pow(rateOfIncrease, number_of_year)) }}</td>
</tr>

これで、無事に数値としてnumber_of_yearsをv-forのところで使う数値の部分に入れることができました。

今回はnumberを使いましたが、他にも修飾子があったので下記にまとめておきます。

修飾子	内容
lazy	入力ボックスに入力されたタイミングではなく、入力し終わったタイミングでデータを変更する。
number	入力した値の型変換を自動で数値にする。
trim	入力した値から自動で空白を削除する

それぞれ使うタイミングが出てきたら具体的な例も追記できればと思います。