vue.js3超初心者向け。v-modelについてv-on・v-bindとの違いと使い方
2271 回閲覧されました
みなさんこんにちは、jonioです。
今回はv-modelの使い方の記事になります。
v-modelはv-bind + v-onですが違いを見るためにv-onとv-bindの解説をまずします。
v-bind
下記のコードで考えます。
<template>
<div>
<img v-bind:src="imageUrl" alt="サンプル画像" />
<button @click="changeImage">画像を変更</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const imageUrl = ref('最初の画像のパス')
const changeImage = () => {
imageUrl.value = '変更後の画像のパス';
}
</script>v-bindは3行目に使っています。
省略して書くこともできてその場合は「v-bind:」を「:」と書きます。
4行目をクリックすると3行目の画像を切り替えることができます。
v-bindはJavaScriptを使って対象にした物（3行目の画像のパス）を動的に変えることができます。
処理の流れがメソッド（13行目）→テンプレートです。
次はv-onです。
v-on
下記のコードで考えます。
<template>
<div>
<p>カウント: {{ count }}</p>
<button v-on:click="increment">増やす</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
// クリック時に呼び出される関数
const increment = () => {
count.value++
}
</script>v-onは4行目で使っています。
省略して書くこともできてその場合は「v-on:」を「@」と書きます。
4行目の「増やす」ボタンをクリックするたびに3行目の数字が1ずつ増えていきます。
処理の流れがテンプレート（4行目）→メソッドです。
v-onとv-bindの処理について
テンプレート→メソッドなのがv-onでメソッド→テンプレートなのがv-bindです。
一方通行の処理になっています。
これに対して両方の行き来ができるのがv-modelです。
v-model
下記のコードで考えます。
<template>
<div>
<input v-model="name" placeholder="名前を入力してください" />
<p>こんにちは、{{ name }}さん！</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>3行目でv-modelを見ています。
v-modelを使うことで3行目のフォームの値を帰ると11行目のnameの値が自動的に変わります。
これはv-onと同じことができていると言えます。
11行目のnameの値が変わることで4行目のnameの値が変わります。
これはv-bindと同じことができていると言えます。
だからv-modelはv-bind + v-onということができます。
v-modelがどんな物かがわかったと思いますが次はどんな場合に使うかを解説します。
v-modelを使う場面
リアルタイムで入力した値を何かに使いたい時に有効です。
例えばフォームに入力した値のバリデーションです。
下記のコードで考えます。
<form>
<input
v-model="username"
@click='inputValidate'
/>
</form>
<script setup>
const username = ref('');
const inputValidate = () => {
全角文字を入力した時にアラートを表示する処理
};
</script>フォームに入力した値をリアルタイムで12行目よりバリデーションして無効な値の場合は弾けるのでこんな場合に有効だと思います。