Vue中如何为HTML元素绑定包含变量的动态class类名？

正确实现方式 #

你原写法的核心问题是在模板表达式中额外加了this前缀，Vue模板的表达式默认绑定组件实例上下文，不需要手动加this，另外根据你的需求，这个类名是固定要生效的，还有更简洁的写法：

写法1：数组语法（推荐，无判断条件的动态类首选）

<div
  :class="[`plan__part_${res}`]"
  :key="item.id"
></div>

写法2：对象语法（适合后续需要加类名显示条件的场景）

如果你习惯用对象语法，只需要去掉this即可：

<div
  v-bind:class="{[`plan__part_${res}`]: true }"
  :key="item.id"
></div>

补充说明：如果使用Vue3的<script setup>语法，以上写法完全通用，只需要确保res是你已经声明的响应式变量即可。

内容的提问来源于stack exchange，提问作者Oleg Obiukh