Activity 14: Attribute, Class & Style Binding (v-bind) · Jimmy Huang's Blog

Activity 14: Attribute, Class & Style Binding (v-bind)

本页目录· 3 条

1. Understanding the Goal
2. Step-by-Step Instruction
3. Code Explanation

1. Understanding the Goal

使用 Vue 的 v-bind 动态绑定属性、类与内联样式。在渲染作者列表时，高亮 George Orwell（条件添加类与样式），并通过属性绑定展示包含出生年份的工具提示。

2. Step-by-Step Instruction

Step 1: Iterate authors with v-for and provide a unique :key.
Step 2: Bind a conditional class with :class to highlight the target author.
Step 3: Bind inline styles with :style to change color and weight based on the condition.
Step 4: Bind the title attribute with :title to show a tooltip containing the birth year.
Step 5: (Optional) Conditionally render a “Modern” badge for authors born after 1900.

3. Code Explanation

部分	说明
`v-for="author in authors"`	遍历作者数组，逐项渲染列表。
`:key="author.id"`	使用作者 `id` 作为唯一标识，确保渲染稳定。
`:class="{ highlight: author.id === orwell?.id }"`	条件类绑定：当当前作者的 `id` 等于 `orwell?.id` 时，添加 `highlight` 类实现高亮。
`:style="{ color: ..., fontWeight: ... }"`	样式绑定：根据条件动态设置文字颜色与粗细（Orwell 加粗、变色）。
`orwell?.id`	可选链访问 `orwell` 的 `id`，避免未定义时报错。
`:title="\`Born in ${author.birthYear}`"`	属性绑定：为 `<li>` 绑定 `title` 属性，悬停显示出生年份提示。
`{{ author.name }} ({{ author.birthYear }})`	插值语法：显示作者姓名与出生年份。
`<span v-if="author.birthYear > 1900" class="modern-badge">Modern</span>`	条件渲染：仅对 1900 年后出生的作者显示 “Modern” 徽章。
`.highlight` / `.modern-badge`	组件样式中定义的 CSS 类，分别用于高亮背景与徽章外观。

javascript

const highlightedAuthorId = computed(() => orwell?.value?.id ?? null)


<ul>
  <li
    v-for="author in authors"
    :key="author.id"
    :class="['author-item', { highlight: author.id === highlightedAuthorId }]"
    :style="{
      color: author.id === highlightedAuthorId ? '#fff' : '#333',
      fontWeight: author.id === highlightedAuthorId ? 'bold' : 'normal'
    }"
    :title="`Born in ${author.birthYear}`"
    :aria-selected="author.id === highlightedAuthorId"
  >
    {{ author.name }} ({{ author.birthYear }})
    <span v-if="author.birthYear > 1900" class="modern-badge"></span>
  </li>
</ul>