Vue使用v-bind绑定动态class报错：'v-bind directives require an attribute value'

嘿，我刚好遇到过这个问题！你碰到的报错是因为Vue在解析:class的对象语法时，没法直接识别动态拼接的键名——默认情况下它会把对象的键当成字符串字面量，而不是表达式，所以直接写'chunk-' + chunk.length会被判定为无效的属性值。

这里有两种靠谱的解决方式：

方式一：使用对象的计算属性名 #

把动态拼接的类名用方括号[]包裹，让Vue把它当成表达式解析：

<div 
  :class="{ 
    ['chunk-' + chunk.length]: true, 
    'is-mobile': isGridView 
  }" 
  class="columns"
>

这样'chunk-' + chunk.length会被正确计算成对应的类名（比如chunk-3），同时保留is-mobile的条件判断，也不会和静态类columns冲突。

方式二：改用数组语法（更直观） #

如果觉得对象语法有点绕，也可以用数组来组合静态类和动态类，逻辑会更清晰：

<div 
  :class="[
    'columns',
    `chunk-${chunk.length}`,
    isGridView ? 'is-mobile' : ''
  ]"
>

这里直接把固定的columns放进数组，动态类用ES6模板字符串拼接，is-mobile则通过三元表达式来控制是否添加，这种写法对新手更友好，也不容易出现语法错误。

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