Vue3 v-bind ディレクティブ

Vue3 内置指令Vue3 組み込みディレクティブ

v-bindディレクティブは、属性またはコンポーネントの prop を動的にバインドし、属性値をデータの変化に応答させることができます。

基本説明

v-bindディレクティブは、1つ以上の属性を式に動的にバインドするために使用されます。これにより、属性の値を固定文字列ではなく動的にすることができます。

  • 省略記法: : または .（prop 修飾子を使用する場合）
  • 期待される型: any（引数あり） | Object（引数なし）
  • 機能: 属性または prop を動的にバインドします。

基本的な使い方

例

<!-- 完全な書き方 -->
<img v-bind:src="imageSrc" />

<!-- 省略記法 -->
<img :src="imageSrc" />

例

<template>
  <div>
    <img :src="currentImage" :alt="imageAlt" />
    <button @click="changeImage">画像を切り替える</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentImage: '/images/photo1.jpg',
imageAlt: '风景图'
    }
  },
  methods: {
    changeImage() {
      this.currentImage = this.currentImage === '/images/photo1.jpg'
        ? '/images/photo2.jpg'
        : '/images/photo1.jpg'
    }
  }
}
</script>

class と style の動的バインド

例

<!-- class を動的にバインド -->
<div :class="{ active: isActive }">内容</div>

<!-- style を動的にバインド -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">スタイル</div>

Vue3 内置指令Vue3 組み込みディレクティブ

その他の拡張