【Vue.js】属性バインディング（v-bind）

はじめに

Vue.jsチュートリアルで学んだことをアウトプットします。
v-bindの理解を深めるために自分で簡単なロジックを作ってみました。
（v-bind以外のディレクティブは投稿の関係上省略しますのでご了承ください）

v-bindとは

HTML要素の属性に動的な値をバインドするために使用されます。
バインド＝拘束する

バインドって?

バインド＝データバインディング

データと対象を結びつけ、データあるいは対象の変更を暗示的にもう一方の変更へ反映すること、それを実現する仕組みのことである → 一方を変更するともう一方を自動的に変更すること

簡単に言うと、データの変更と描画する内容を同期させることかな？と解釈しました。

仕様

入力フォームに値を入力して、送信ボタンを押した時に「メッセージを送信しました」の表示が半透明から赤色に変わる。

作成したコード

CompositionAPIで作成しました。

<script setup>
import { ref } from 'vue'
  
const labelColor = ref('red')
const inputClass = ref('text-input')
const buttonClass = ref('button')
const messageClass = ref('send-message')
const isActive = ref(false)
const inputText = ref('')
const message = ref('メッセージを送信しました')

function handleSubmit() {
  isActive.value = true;
  
  if(inputText.value) {
    messageClass.value = 'sent-message';
  } else {
   	messageClass.value = 'send-message';
  }
}

</script>

<template>
  <label :style="{ color: labelColor }">名前</label><br>
  <input :class="inputClass" v-model="inputText">
  <button :class="buttonClass" @click=handleSubmit>送信</button>
  <p v-if="message" :class="messageClass">{{ message }}</p>
</template>

<style>
  .text-input {
    width: 200px;
    padding: 5px;
  }

  .button {
    margin-left: 10px;
  }

  .send-message {
	color: black;
    opacity: 0.5;
  }
  
  .sent-message {
    color: red;
  }
</style>

v-bind実装箇所（一部抜粋）

属性バインディング（class属性）

• p要素のclass属性にmessageClass変数のリアクティブな値が設定されます(リアクティブの説明についてはこちら)

• 初期値はsend-messageクラスの黒色に設定しており、inputText変数に入力値があった場合、sent-messageクラスの赤色にcolorプロパティの値が変更されます

<script setup>
const messageClass = ref('submit-message')
const message = ref('')
function handleSubmit() {
  isActive.value = true;
  
  if(inputText.value) {
    messageClass.value = 'sent-message';
  } else {
   	messageClass.value = 'send-message';
  }
}
</script>

<template>
 <p v-if="message" v-bind:class="messageClass">{{ message }}</p>
</template>

<style>
  .send-message {
		color: black;
    opacity: 0.5;
  }
  
  .sent-message {
    color: red;
  }
</style>

以下のようにv-bindの記述を省略できます。

<p v-if="message" :class="messageClass">{{ message }}</p>

実行結果

まとめ

v-bindは、HTML要素の属性に動的な値をバインドするために使う。
使い方合ってるか怪しいですが、実際に手を動かしてみるとイメージしやすいですね。

参考記事

属性バインディング
HTML クラスのバインディング
インラインスタイルのバインディング
Vue -データバインディングとは -