こんにちは、あべしんです。
Vue.jsプログラミング学習第5回はv-modelについて学んでいきます。
v-modelとは？
v-modelは、入力フォームとVueを双方向バインドするためのものです。
…なんのこっちゃ 笑
と思われるかもしれないので、もう少し簡単に言うと、
HTMLの入力フォーム(テキストボックスやラジオボタンなど)とVueの変数を結びつける(バインド)ものです。
双方向と言ってるのは、片方の値が変わったらもう片方も変わるということです。
つまり常に同期をとってる状態というわけです。
第3回で紹介したv-bindも同じくバインドしてますがこちらは一方通行でしかなく、「Vueの変数を書き換えてHTML側に反映させる」ことしかできません。
第3回を読んでない方は併せて読んでみてください！
【Vue.jsプログラミング学習 第3回】v-bindで属性を操作しよう
それでは実際にソースコードを見てみましょう！
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.jsプログラミング学習 第5回</title>
</head>
<body>
<div id="app">
<input type="text" v-model="sampleText">
<p>sampleTextの中身は<b> {{ sampleText }} </b>だよ。</p>
<button v-on:click='btnClick()'>文字を変えるよ</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
sampleText: "おはようございます"
},
methods: {
btnClick: function() {
this.sampleText = "こんばんは";
}
}
})
</script>
</body>
</html>
10行目のinputタグにv-modelをつけてます。
v-model=”sampleText”とすることで、Vue側のdata内にあるsampleText変数と結びつきます。
11行目ではsampleTextの中身を表示してます。
13行目のbuttonにはv-onをつけて、ボタンがクリックされた時にbtnClickメソッドを呼び出すようにしてます。
btnClickメソッドの処理は25行目にある通り、sampleTextの中身を“こんばんは”に変更してますね。
それでは実行してみましょう！
実行結果
「文字を変えるよ」ボタンを押すと「おはようございます」から「こんばんは」に変わります。
これはbtnClickメソッドによってsampleTextの中身が変更され、HTML側に変更後を表示しているからですね。
では、inputタグの入力フォームに文字を入力してみましょう。
太字の部分が入力した文字に変更されているのが分かります。
これは入力フォームの値が変更されたことによって、結びついてるVueのsampleText変数の中身も変更されたからです。
このようにv-modelを使うことで、ユーザが入力した値をVue側で扱うことができるようになります。
これを応用して、入力フォームに入力した値が正しいものかを検証するバリデーション機能を作ってみるのもいいかもしれません。
(新規会員登録画面とかでよく見かけるやつです)
今日はここまで！
第6回はcomputedについて解説してます。
コメント