Vue2动态计算class出现Raw expression及无效表达式错误如何解决

错误产生原因 #

• 语法不符合JS表达式规则：v-bind:class（缩写:class）的属性值必须是合法的JS表达式。你的写法中直接将静态字符串'str1'和方法调用calcStarClass(1, p.rtg)用空格拼接，JS解析器在读取完字符串'str1'后无法识别后续的标识符calcStarClass的作用，因此抛出Unexpected identifier错误。
• 首次报错还存在变量名笔误：你首次写法中将参数p.rtg错写为p.rtn，字段不匹配也会触发表达式解析错误。

修复方案 #

方案1：使用字符串拼接 #

用+运算符拼接静态类名和方法返回的动态类名，注意静态类名末尾要加空格，避免两个类名粘连：

<li :class="'str1 ' + calcStarClass(1, p.rtg)"></li>

方案2：使用Vue支持的数组语法（更推荐） #

Vue的class绑定原生支持数组写法，数组每一项对应一个类名，无需手动处理空格，可读性和可维护性更高：

<li :class="['str1', calcStarClass(1, p.rtg)]"></li>

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