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等でローカル環境に簡易開発サーバを構築する方法を覚えておくと役に立つと思います。
ローカル環境に簡易開発サーバを構築する方法はこちらの記事で解説しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <style> ul { list-style-type: none; } ul, li { margin: 0; padding: 0; } .item { background-color: #eee; padding: 1em; margin-bottom: 1em; } h2 { font-size: 1.1em; margin: 0 0 .5em; color: #001bff; } .selected-you { background-color: #222; color: #fff; padding: 1em; position: fixed; bottom: 0; left: 0; width: 100%; } .selected-you li { border-bottom: 1px dotted #aaa; line-height: 3em; } </style> </head> <body> <div id="app"> <form> <section class="item"> <h2>1.機種を選んでください。</h2> <ul> <li> <input type="radio" id="smartPhoneA" value="smartPhoneA" name="smartphone"> <label for="smartPhoneA">smartPhone A</label> </li> <li> <input type="radio" id="smartPhoneB" value="smartPhoneB" name="smartphone"> <label for="smartPhoneB">smartPhone B</label> </li> <li> <input type="radio" id="smartPhoneC" value="smartPhoneC" name="smartphone"> <label for="smartPhoneC">smartPhone C</label> </li> </ul> </section> <section class="item"> <h2>2.どの会社の回線を使いますか？</h2> <select name="company"> <option disabled value="">会社を選択してください</option> <option>D社</option> <option>A社</option> <option>S社</option> </select> </section> <section class="item"> <h2>3.規約に同意しますか？</h2> <input type="checkbox" id="checkbox" name="ischecked"> <label for="checkbox">規約に同意する</label> </section> <section class="selected-you"> <h2>あなたが選択したもの</h2> <ul> <li>1. smartPhoneA</li> <li>2. D社</li> <li>3. 規約に同意する</li> </ul> </section> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var vm = new Vue({ el: '#app', }); </script> </body> </html> |
v-modelディレクティブを使って機能を追加しよう
どこにv-modelディレクティブを追加するかということですが、基本的にはname属性を置き換えればOKです。
<input type=”radio” name=”tel”>
↓
<input type=”radio” v-model=”tel”>
ラジオボタン
- 全てのinput要素にv-model=”smartPhone”を追加します。
- あなたが選んだものリストにsmartPhoneをデータバインディングします。
- ルートVueインスタンスのdataプロパティにsmartPhoneプロパティを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <!doctype html> <html lang="ja"> <head> <!-- 省略 --> </head> <body> <div id="app"> <form> <section class="item"> <h2>1.機種を選んでください。</h2> <ul> <!-- ①v-modelディレクティブを追加する。ここから --> <li> <input type="radio" id="smartPhoneA" value="smartPhoneA" v-model="smartPhone"> <label for="smartPhoneA">smartPhone A</label> </li> <li> <input type="radio" id="smartPhoneB" value="smartPhoneB" v-model="smartPhone"> <label for="smartPhoneB">smartPhone B</label> </li> <li> <input type="radio" id="smartPhoneC" value="smartPhoneC" v-model="smartPhone"> <label for="smartPhoneC">smartPhone C</label> </li> <!-- ①v-modelディレクティブを追加する。ここまで --> </ul> </section> <!-- 省略 --> <section class="selected-you"> <h2>あなたが選択したもの</h2> <ul> <!-- ②ここを書き換える --> <li>1. {{ smartPhone }}</li> <!-- ②ここまで書き換える --> <li>2. D社</li> <li>3. 規約に同意する</li> </ul> </section> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var vm = new Vue({ el: '#app', // ③ここから追加する data: { smartPhone: '', } // ③ここまで追加する }); </script> </body> </html> |
セレクトボックス
- select要素にv-model=”company”を追加します。
- あなたが選んだものリストにcompanyをデータバインディングします。
- ルートVueインスタンスのdataプロパティにcompanyプロパティを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!doctype html> <html lang="ja"> <head> <!-- 省略 --> </head> <body> <div id="app"> <form> <!-- 省略 --> <section class="item"> <h2>2.どの会社の回線を使いますか？</h2> <!-- ①v-modelディレクティブを追加する。ここから --> <select v-model="company"> <!-- ①v-modelディレクティブを追加する。ここまで --> <option disabled value="">会社を選択してください</option> <option>D社</option> <option>A社</option> <option>S社</option> </select> </section> <!-- 省略 --> <section class="selected-you"> <h2>あなたが選択したもの</h2> <ul> <li>1. {{ smartPhone }}</li> <!-- ②ここを書き換える --> <li>2. {{ company }}</li> <!-- ②ここまで書き換える --> <li>3. 規約に同意する</li> </ul> </section> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var vm = new Vue({ el: '#app', data: { smartPhone: '', // ここから追加する company: '', // ここまで追加する }, }); </script> </body> </html> |
チェックボックス
- input要素にv-model=”checked”を追加します。
- labelの要素の内容にisChecked(算出プロパティ)をデータバインディングします。
- あなたが選んだものリストにisChecked(算出プロパティ)をデータバインディングします。
- ルートVueインスタンスのdataプロパティにcheckedプロパティを追加します。
- isChecked算出プロパティを追加します。checkedがtrueの場合は「規約に同意する」という文字列を返します。checkedがfalseの場合は「規約に同意しない」という文字列を返します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!doctype html> <html lang="ja"> <head> <!-- 省略 --> </head> <body> <div id="app"> <form> <!-- 省略 --> <section class="item"> <h2>3.規約に同意しますか？</h2> <!-- ①v-modelディレクティブを追加する。ここから --> <input type="checkbox" id="checkbox" v-model="checked"> <!-- ①v-modelディレクティブを追加する。ここまで --> <!-- ②ここから追加する --> <label for="checkbox">{{ isChecked }}</label> <!-- ②ここまで追加する --> </section> <section class="selected-you"> <h2>あなたが選択したもの</h2> <ul> <li>1. {{ smartPhone }}</li> <li>2. {{ company }}</li> <!-- ③ここを書き換える --> <li>3. {{ isChecked }}</li> <!-- ③ここまで書き換える --> </ul> </section> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var vm = new Vue({ el: '#app', data: { smartPhone: '', company: '', // ④ここから追加する checked: false, // ④ここまで追加する }, // ⑤算出プロパティを追加する。ここから computed: { isChecked: function () { if (this.checked) { return '規約に同意する'; } return '規約に同意しない'; } } // ⑤算出プロパティを追加する。ここまで }); </script> </body> </html> |
v-if機能の追加
最後に、要素にv-ifディレクティブを追加します。v-ifディレクティブは式が真を返す場合のみv-ifディレクティブを含む要素配下を描画します。v-ifを追加するとすこしアプリっぽくなります！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!doctype html> <html lang="ja"> <head> <!-- 省略 --> </head> <body> <div id="app"> <form> <!-- 省略 --> <!-- v-ifディレクティブを追加 --> <section v-if="smartPhone" class="item"> <h2>2.どの会社の回線を使いますか？</h2> <!-- 省略 --> </section> <!-- v-ifディレクティブを追加 --> <section v-if="company" class="item"> <h2>3.規約に同意しますか？</h2> <!-- 省略 --> </section> <!-- v-ifディレクティブを追加 --> <section v-if="smartPhone" class="selected-you"> <h2>あなたが選択したもの</h2> <ul> <li v-if="smartPhone">1. {{ smartPhone }}</li> <li v-if="company">2. {{ company }}</li> <li v-if="company">3. {{ isChecked }}</li> </ul> </section> </form> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> // 省略 </script> </body> </html> |
コードの全容
コードの全容はJSFiddleでご確認いただけます。URLはこちらです。
筆者
以上がv-modelの使い方です。v-modelは比較的派手な機能なので、使っていて楽しいですね！
スポンサードサーチ
スポンサードサーチ
