v-modelは変数とコンポーネントの双方向データバインドをしてくれる

• 概要
• 環境
• サンプルコード
• ちょっと解説
• 参考サイト

概要

いろいろなところで丁寧な説明がされていますが一応自分が忘れないようにメモ

環境

• macOS 11.7
• node 18.9.0
• quasar 2.8.2

サンプルコード

• vim src/pages/IndexPage.vue

<template>
  <div>
    <input type="text" v-model="value" />
    <p>Value: {{ value }}</p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
</script>

ちょっと解説

input の v-model="value" は script ないで定義した value 変数を指している
p タグ内の value も当然変数の value を指している

input のフォームに入力した値はフォームにも反映されるし同時に value 変数にも反映される

これが双方向データバインドの意味になる

ちなみに v-bind という同じような機能もあるがこれは一方向データバインドになる

参考サイト

• https://learnvue.co/tutorials/v-model-guide