Vue.js中如何实现CSS类名插值拼接并去除空格？

你的问题出在同时混用了静态class和动态:class，静态部分的icon-后面没有内容，会被保留成带空格的icon- ，和动态绑定的icon1拼接后就出现了多余空格。下面是几种靠谱的解决方式：

1. 数组语法直接拼接（最常用） #

把固定类和拼接好的动态类放在:class的数组里，Vue会自动帮你处理空格：

<i :class="['icon', `icon-${category.icon}`]"></i>

用模板字符串把icon-和category.icon直接拼成完整的icon-icon1，数组里的两项会被正确合并成无多余空格的icon icon-icon1。

2. 对象语法（适合带条件的场景） #

如果需要根据条件控制类名显示，用对象语法也能实现：

<i :class="{
  'icon': true,
  [`icon-${category.icon}`]: true
}"></i>

只要值为true的键就会被添加到class里，同样不会有多余空格。

3. 计算属性（适合多处复用） #

要是这个类名需要在多个地方用，写个计算属性更清爽：

computed: {
  iconClass() {
    return `icon icon-${this.category.icon}`
  }
}

然后模板里直接用：

<i :class="iconClass"></i>

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