Vueでの入力フィールドへの双方向データバインディング

これから、Vueフレームワークでの入力フィールドの操作方法を学びます。これらを使用して、ページにデータをリアクティブに追加します。さっそく始めましょう。まず、入力フィールドがあるとします：

<template>
	<input>
</template>

また、プロパティ message があるとします：

data() {
	return {
		message: 'hello',
	}
}

このプロパティと入力フィールドを、 どちらか一方の変更が他方の変更を引き起こすように関連付けることができます。これは、ディレクティブ v-model を使用して行われ、ここには入力フィールドにバインドされるプロパティが指定されます。

入力フィールドにプロパティ message をバインドしてみましょう：

<template>
	<input v-model="message">
</template>

コードを実行すると、入力フィールドにはプロパティ message のテキストが表示されます。また、入力フィールドのデータを編集すると、プロパティもそれに応じて変更されます。これを確認するために、入力フィールドに入力された内容を段落のどこかに出力してみましょう：

<template>
	<input v-model="message">
	<p>{{ message }}</p>
</template>

入力フィールドがあります。入力フィールドに入力されたテキストがすぐにその下の段落に出力されるようにしてください。

前のタスクを変更して、テキストが大文字で出力されるようにしてください。

入力フィールドがあります。ここに数値が入力されるとします。入力中に入力された数値の2乗が段落に出力されるようにしてください。