【Vue.js】属性バインディングの使い方

<script setup>
import { ref } from 'vue'

const imageUrl = ref('/images/sample.png')
</script>

<template>
  <!-- :src は v-bind:src の省略形 -->
  <img :src="imageUrl" alt="Sample Image">
</template>

<script setup>
import { ref } from 'vue'

const url = ref('https://example.com/')
const attrs = ref({ href: url.value, target: '_blank', rel: 'noopener' })
</script>

<template>
  <a v-bind="attrs">Link</a>
</template>

<!-- 個別指定が後ろ → id="red" -->
<div v-bind="{ id: 'blue' }" id="red"></div>

<!-- v-bind が後ろ → id="blue" -->
<div id="red" v-bind="{ id: 'blue' }"></div>

<script setup>
import { ref } from 'vue'

const isDisabled = ref(true)
const title = ref(null)
</script>

<template>
  <!-- true なら disabled が付き、false なら属性ごと消える -->
  <button :disabled="isDisabled">送信</button>

  <!-- null / undefined なら title 属性は出力されない -->
  <p :title="title">ヒント</p>

  <!-- 通常の属性に false を渡すと title="false" と出力される（Vue 3） -->
  <p :title="false">注意</p>
</template>

<script setup>
import { ref } from 'vue'

const attributeName = ref('placeholder')
</script>

<template>
  <!-- 属性名もデータで決まる。null を渡すとバインドが外れる -->
  <input :[attributeName]="'名前を入力'">
</template>

<!-- 親コンポーネント -->
<MyComponent :prop-one="value" />

<!-- 子コンポーネント（MyComponent.vue） -->
<script setup>
defineProps({
  propOne: String
})
</script>

<script setup>
import { ref } from 'vue'

const id = ref('main')
</script>

<template>
  <!-- Vue 3.4 以降：:id は :id="id" と同じ -->
  <div :id></div>
</template>

<script setup>
// userUrl は外部から来る値（例：プロフィールのWebサイトURL）
defineProps({ userUrl: String })
</script>

<template>
  <!-- javascript: で始まるURLだと、クリックでスクリプトが実行されるおそれがある -->
  <a :href="userUrl">サイトを見る</a>
</template>