Vue.jsのv-bindとv-model

v-bind

Vue.jsのディレクティブの一つ
HTMLの属性にVue.jsのデータをバインドすることができ、JavaScriptの式を用いて動的にHTMLの属性を変更することが出来ます。
v-bindの省略形としてコロン(:)を使うことも可能です。

サンプルコード

<template>
  <div>
    <h2 v-bind:title="titleText">Hello, World!</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      titleText: 'タイトルです！'
    }
  }
}

</script>

v-bind:titleを使用して、<h2>要素のtitle属性をVue.jsのデータ titleText にバインド
titleTextの値が変更されると、<h2>要素のtitle属性も自動的に変更される

参考記事

v-model

フォーム要素とVue.jsのデータを双方向でバインドするために使用されます。

v-modelでフォーム要素に入力された値を変更すると、Vue.jsのデータも同時に更新されるため、フォームの値を簡単に管理することが出来る

サンプルコード

<template>
  <div>
    <input type="text" v-model="textMessage">
    <p>入力されたメッセージ: {{ textMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textMessage: ''
    }
  }
}
</script>

要素にv-modelを設定して、データtextMessageとバインドしており、要素に入力された値が textMessage に自動的に反映されます。

要素内でtextMessageの値を表示しているため、入力されたメッセージをリアルタイムで表示することができます。

参考記事