フォームバインディング

概要

双方向バインディング

v-bindとv-onを同時に使用することで双方向バインディングを作成することができる。

<input :value="text" @input="onInput">

引数の説明についてはここを参照。

function onInput(e){
	text.value = e.target.value
}

v-model

双方向バインディングを簡略化するために、v-modelディレクティブが存在する。

<input v-model="text">

v-modelは<input>の値をバインドされた状態と自動的に同期するので、そのためのイベントハンドラを記述する必要はない。

以下にv-modelを使用した例を示す。

<script setup>
	import { ref } from 'vue'
	
	const text = ref('')
	
	function onInput(e) {
	  text.value = e.target.value
	}
</script>
 
<template>
	<input v-model="text" placeholder="Type here">
	<p>{{ text }}</p>
</template>