Vue 2动态绑定CSS类问题：循环仅返回单个结果

算力阿峰

2026-5-29

问题分析与解决方案

你遇到的问题主要源于两个关键误区：

你的计算属性style在for循环的第一次迭代就执行了return，导致只会返回第一个工具对应的类名icon--bulma，后续循环完全没机会运行；
这个计算属性是组件全局的，无法对应v-for循环里的每一个独立tool项，自然没法给每个panel-icon绑定专属的样式类。

最简单的修复：直接在模板中动态绑定类名

既然v-for循环里已经能直接拿到每个tool对象，我们可以直接在:class里拼接对应的类名，完全不需要额外的计算属性：

修改后的HTML代码：

<div class="container" id="lab">
  <a class="panel-block" v-for="tool in tools" :key="tool.toolName">
    <span class="panel-icon" :class="'icon--' + tool.toolName">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    {{ tool.toolName }}
  </a>
</div>

若需复用逻辑：用方法替代计算属性

如果后续业务逻辑更复杂，需要复用类名生成规则，可以用方法来处理（计算属性是响应式缓存的，不适合处理每个独立项的动态逻辑）：

修改后的Vue.js代码：

new Vue({
  el: '#lab',
  data: {
    tools: [
      { toolName: 'bulma' },
      { toolName: 'marksheet' },
      { toolName: 'minireset' },
      { toolName: 'jgthms' }
    ]
  },
  methods: {
    getToolIconClass(tool) {
      return 'icon--' + tool.toolName;
    }
  }
})

对应HTML模板：

<div class="container" id="lab">
  <a class="panel-block" v-for="tool in tools" :key="tool.toolName">
    <span class="panel-icon" :class="getToolIconClass(tool)">
      <i class="fas fa-book" aria-hidden="true"></i>
    </span>
    {{ tool.toolName }}
  </a>
</div>