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

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

App.vue<template>
  <input>
</template>

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

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

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

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

App.vue<template>
  <input v-model="message">
</template>

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

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