Vueディレクティブの使い方

v-if ディレクティブ: v-ifディレクティブは、条件に基づいて要素の表示・非表示を切り替えるために使用されます。以下は使用例です。

<template>
  <div>
    <p v-if="isDisplayed">この要素は表示されます。</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isDisplayed: true
    };
  }
}
</script>

v-for ディレクティブ: v-forディレクティブは、リストを繰り返し表示するために使用されます。以下は使用例です。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'アイテム1' },
        { id: 2, name: 'アイテム2' },
        { id: 3, name: 'アイテム3' }
      ]
    };
  }
}
</script>

v-bind ディレクティブ: v-bindディレクティブは、属性の値を動的にバインドするために使用されます。以下は使用例です。

<template>
  <div>
    <img v-bind:src="imageUrl" alt="画像">
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
}
</script>

これらはVueディレクティブの一部の例です。さまざまなディレクティブがあり、それぞれの目的に応じて使用されます。詳細な情報や他のディレクティブの使用例については、公式のVue.jsドキュメントを参照してください。