JavaScript

【Vue.js】v-modelの使い方をサンプルコードで解説

Vue.jsを学び始めて、最初に面白い!と思うのは、v-modelを使った時という人は多いのではないでしょうか。僕はそうでした。これからv-modelを学ぶ方やv-modelの使いどころを知りたい方向けに、v-modelを使ったサンプルをご紹介します。

この記事を最後まで読むと「ユーザーがフォームで選択した情報が、画面の下部にまとめて表示される」以下のようなWebアプリの基礎を学ぶことができます。よろしければ実際に触ってみてください。

静的なソースコードをPCにコピーしよう

以下のソースコードをPCのデスクトップに保存してください。ファイル名はvue-vmodel.htmlなどのお好きなもので大丈夫です。このソースコードは静的なものなので、ここに機能を付け加えていきましょう。

サンプルのソースコードは直接ブラウザにドラッグ&ドロップすることで実行可能です。または、今後のためにもNode.jsのhttp-serverやVisual Studio CodeのLive Server等でローカル環境に簡易開発サーバを構築する方法を覚えておくと役に立つと思います。
ローカル環境に簡易開発サーバを構築する方法はこちらの記事で解説しています。

v-modelディレクティブを使って機能を追加しよう

どこにv-modelディレクティブを追加するかということですが、基本的にはname属性を置き換えればOKです。

<input type=”radio” name=”tel”>

<input type=”radio” v-model=”tel”>

ラジオボタン

  1. 全てのinput要素にv-model=”smartPhone”を追加します。
  2. あなたが選んだものリストにsmartPhoneをデータバインディングします。
  3. ルートVueインスタンスのdataプロパティにsmartPhoneプロパティを追加します。

セレクトボックス

  1. select要素にv-model=”company”を追加します。
  2. あなたが選んだものリストにcompanyをデータバインディングします。
  3. ルートVueインスタンスのdataプロパティにcompanyプロパティを追加します。

チェックボックス

  1. input要素にv-model=”checked”を追加します。
  2. labelの要素の内容にisChecked(算出プロパティ)をデータバインディングします。
  3. あなたが選んだものリストにisChecked(算出プロパティ)をデータバインディングします。
  4. ルートVueインスタンスのdataプロパティにcheckedプロパティを追加します。
  5. isChecked算出プロパティを追加します。checkedがtrueの場合は「規約に同意する」という文字列を返します。checkedがfalseの場合は「規約に同意しない」という文字列を返します。

v-if機能の追加

最後に、要素にv-ifディレクティブを追加します。v-ifディレクティブは式が真を返す場合のみv-ifディレクティブを含む要素配下を描画します。v-ifを追加するとすこしアプリっぽくなります!

コードの全容

コードの全容はJSFiddleでご確認いただけます。URLはこちらです。

筆者
筆者
以上がv-modelの使い方です。v-modelは比較的派手な機能なので、使っていて楽しいですね!