Vue.js中使用v-for根据列表索引设置HTML样式的方法

云上老周

2026-5-12

嘿，这问题很常见，我给你几个实用的解决方案，你可以根据需求选：

方案1：用条件渲染包裹`<strong>`标签

直接在模板里判断索引，符合条件的内容用<strong>包裹，语义化还直观：

<ul>
  <li v-for="(item, index) in myList()" :key="index">
    <!-- 用数组includes判断索引是否在目标范围内，后续加索引改数组就行 -->
    <strong v-if="[4, 5].includes(index)">{{ item }}</strong>
    <span v-else>{{ item }}</span>
  </li>
</ul>

要是不想用includes，直接写逻辑判断也可以：v-if="index === 4 || index === 5"，不过前者扩展性更好，比如以后要加索引6，直接把数组改成[4,5,6]就行。

方案2：动态绑定类名（更推荐的样式管理方式）

如果只是需要视觉上的加粗效果，用动态类把样式和结构分开会更符合Vue的最佳实践，以后改样式也方便：

<template>
  <ul>
    <li 
      v-for="(item, index) in myList()" 
      :key="index"
      :class="{ 'highlight-bold': [4, 5].includes(index) }"
    >
      {{ item }}
    </li>
  </ul>
</template>

<style scoped>
.highlight-bold {
  font-weight: 700; /* 比默认strong的加粗更可控 */
  /* 还能加其他样式，比如 color: red; */
}
</style>

这种方式的好处是，你可以随时修改.highlight-bold的样式，不用动模板里的结构，维护起来更轻松。