商品レビューゲーム食レポお問い合わせホームプログラミングJavaScriptVue.jsVue.jsのv-modelとは?【サンプルでわかりやすく】Vue.jsTwitterFacebookはてブPocketLINEコピー2021.09.08この記事では、Vue.jsのv-modelについて記載しています。v-modelについての説明と、実際にサンプルコードを書いてみて解説しています。Vue.jsのバージョン2で検証していますが、Vue.jsのバージョン3でも同じように動作します。目次v-modelとは?Vue.jsでv-modelを使用したサンプルコード解説v-modelのサンプルを動作確認する終わりにv-modelとは?v-modelはVue.jsで用意してある変数とタグの値を同期してくれる機能です。inputタグにv-modelを書いて、変数と結びつけた場合に、変数の内容とタグを同期してくれます。下記にようになります。/>このように記載すると、phoneNumberという変数とテキストボックスに入力した値を同期してくれます。テキストボックスの中の値を更新すると、変数にも反映されます。逆に変数を変えた場合も、画面にすぐに反映してくれます。(再レンダリングされます)このように画面(ビュー)と変数(データ)を自動的に同期することを、双方向データバインディングと呼びます。Vue.jsでv-modelを使用したサンプルコードv-modelのテストのために、下記のようなサンプルを作成しました。画面のclassのところは無視して大丈夫です。ここでは、見やすいフォームになるようにbootstrap5を使っています。画面にはテキストボックスとボタンがふたつ表示されます。画面のテキストボックスにはVue.jsで用意したtext変数と同期します。下記のようにv-modelでtext変数と関連づいています。/>Vue.jsのデータとして、text変数を返しているので、v-modelに設定するとテキストボックスと双方向データバインディングされます。showボタンを押すと、alertでtext変数の内容を確認できるようにしました。changeボタンを押すと、text変数の中身を「test!!!」で上書きします。あとtext変数が常時変わっているのがわかるように、下記のように表示する箇所を設けました。テキストボックスにデータを入力すると、常時変わっていることが確認できます。}}</div>v-modelのサンプルを動作確認する実際に動かして、動作させてみるとこのようになります。初回表示時は、下記のような感じです。テキストボックスに値を入力してみると..下記のように双方向データバインディング(同期)されて、即座に画面に反映されていることが確認できます。入力した後にshowボタンを押すと、入力した内容が表示されます。入力した後にchangeボタンを押すと、テキストボックスが上書きされました!終わりに今回はVue.jsのv-modelについて確認してみました。Vue.jsのよく使うコアな属性といっても良い機能だと思います。//Vue.js記事一覧へVue.jsプログラミングシェアするTwitterFacebookはてブPocketLINEコピーyasuakiをフォローするyasuakiコードライクLaravelLaravelでEloquentを使わずにSQLを実行する方法!LaravelでEloquentを使わずに、DBファサードを使用してSQLを実行する方法について書いています。公式サイトのこちらに書いている内容になります。DBファサードを使用して、SQLを実行する準備DBファサードを使用することで、Elo...JavaScriptJavaScriptのcontinueの使い方!サンプルコード3つ!JavaScriptのcontinueの使い方について書いています。continueについて解説した後に、下記のことについて書きました。・continueをラベルで使う方法・continueはforEachで使えるのか?・continueと...C#C#で文字列に含むか検索して確認する2つの方法!C#で文字列に特定の文字列を含むか検索して、確認する方法について書いています。対象の文字列に、指定した特定の文字列を含むか確認するには、下記のメソッドを使うことができます。・文字列からContainsメソッドを呼び出す。・文字列からInde...Git【現役エンジニアが選定】Gitの学習におすすめの本4選!Gitを学習するときにおすすめの本を4つ紹介しています。Gitについて簡単に解説しています。その後に、Gitを学習する時におすすめの本を紹介しています。最後にそれぞれの本を、ターミナル(CUI)・SorceTree(GUI)のどちらの...PHPPHPの配列に要素を追加する3つの方法!(array_push)PHPの配列に要素を追加する方法について書いています。PHPの配列に要素を追加するときには、下記の方法を使います。Frameworkの学習におすすめの本を3つ紹介しています。Frameworkについて簡単に説明して、その後におすすめの本を紹介しました。Frameworkを「どの本で学ぶのが...PythonPythonのバージョンを確認する3つの方法!Pythonのバージョンを確認する方法について書いています。バージョンを確認するには、下記の3つの方法があります。・Pythonコマンドで`-V`オプションを指定する・ソースコードの中でpython_version関数を呼び出す・ソースコー...PythonPythonで文字列を置換する3つの方法!(replace)Pythonで文字列を置換する方法について書いています。Pythonで文字列を置換する時には、下記のメソッドを使います。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δプロフィールyasuaki福岡でフリーランスをやってます。業界歴13年になりました、SESで働くことがほとんどです。なんでもやってますが、Webが得意です。このブログではプログラミング技術の内容を中心に、たまに商品レビューとかを書いています。目次v-modelとは?Vue.jsでv-modelを使用したサンプルコード解説v-modelのサンプルを動作確認する終わりにVue.jsの学習におすすめの本を選定!【現役エンジニアが選定】Vue.jsの学習におすすめの本4選!今回はVue.jsの学習におすすめな本を4つ紹介しています。学習に本が必要かも考えてみたので確認してみてください。Vue.jsの学習に本が必要?Vue.jsはJavaScriptでWebアプリケーションのフロントエンドを開発するときに使われ...codelikes.com2022.10.23JavaScriptの学習におすすめの本を選定!【現役エンジニアが選定】JavaScriptの学習におすすめの本5選JavaScriptの学習におすすめの本を選定してみました。最初にJavaScriptはどんなものかと、学習に本が必要かを考えて書いてみました。商品レビューゲーム食レポお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。