クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

Vue.js

Vue.js 双方向バインディングサンプル(v-model)

投稿日:

Vue.jsの強力な機能の1つに、双方向バインディングがあります。
難しそうな名前ですが、簡単に言うとスクリプト側の変数とHTML側の変数を結びつける機能です。

今回作るサンプルは、HTML側の「テキストエリアの内容」と、「Vue.jsの変数」をバインディングします。
こうしておくと「テキストエリアに入力した内容でVue.jsの変数が瞬時に更新されます。」
「テキストエリアの内容 = Vue.jsの変数」のイメージです。

この機能をうまく使いこなせば、HTMLとスクリプト側での値の受け渡しの処理を記述することが不要になります。

とても便利ですね!

スクリプト(Vue.js 双方向バインディングサンプル(v-model))

スクリプト側には「message」という変数を用意しておきましょう。
この「message」と「テキストエリア」をバインディングします。

 

HTML(Vue.js 双方向バインディングサンプル(v-model))

[2行目]
messageの文字数を表示させています。
messageの内容が瞬時に変わっていることを確認するためです。
ツイッターみたいに、残り何文字入力できるかを表示させるためにも利用できますね。

[3行目]
バインディングするためにの仕掛けを記述します。
「v-model = “message”」でテキストエリアの内容と、messageが結びつきました。

[4行目]
「message」変数の内容を記述します。
こちらもmessageの内容が瞬時に変わったことが確認できますね。

たったこれだけでバインディングの仕組みが出来上がりました!
バインディングを使って色々出来そうですね!

サンプルも作ってます。

See the Pen Vue.js 双方向バインディングサンプル(v-model) by clue-design (@clue-design) on CodePen.0

コード変更や、大きな画面でみたい場合はこちらから。

-Vue.js

執筆者:

関連記事

Vue.js 一番簡単なサンプル

Vue.jsが流行しているようですので、勉強していきたいと思います。 まずは公式ページにもある、一番簡単なサンプルを作っていきましょう!   Vue.jsの読み込み(Vue.js一番簡単なサ …

Vue.js タグの属性値を操作してみよう!サンプル(v-bind)

Vue.jsでは、属性の値を自由に入れ込むことができます。 では「v-bind」を使って目的の属性に値を入れてみましょう! 今回は、imgタグの属性を操作してみようと思います。 スクリプト(Vue.j …

Vue.js if文のような分岐処理はどうやるの?サンプル(v-if)

Vue.jsにもif文の代わりになる仕組みがあるので紹介したいと思います。 「v-if」という属性を使います。 今回は、条件が一致していたら表示、一致していなければ非表示されるサンプルを作ってみましょ …

Vue.js for文のような繰り返し処理はどうやるの?サンプル(v-for)

もちろんVue.jsにも繰り返し処理があります。 「v-for」を使います(分かりやすい名前ですね)。 早速、どうやるのか試していきましょう! スクリプト(Vue.js for文のような繰り返し処理は …

Vue.js v-forでインデックス(カウンタ)を付けるサンプル(v-forでindex)

Vue.jsも少しずつ勉強していこうと思います。 そのままでも便利なv-forですが、何回目のループかを知りたい場合があります。 その場合もv-forだけで対応可能です。具体的にはv-forで展開され …


comment

メールアドレスが公開されることはありません。