关于v-for中v-bind绑定class与id的语法疑问

示例代码 #

CSS

.fav { background:"blue"}

HTML

<li
  v-for="(book, index) in books"
  :key="book.title"
  :id="this.code + '-' + index"
  :class="{fav: book.isFav}"
>
  {{book.title}} - {{index}}
</li>

JavaScript

data() {
  return {
    code: "N54234",
    books: [
      { title: "the final empire", isFav: true },
      { title: "the test empire", isFav: false },
      { title: "the first empire", isFav: true },
    ],
  };
}

疑问解答 #

先纠正一个误解：:class="{fav: book.isFav}"里的{}不是分组符号，也和三元运算符无关，这是Vue动态class绑定的对象语法——意思是当book.isFav为true时，给当前元素添加fav类名，反之则不添加。

1. 为什么:id="this.code + '-' + index"不需要使用{}？

Vue中:是v-bind的简写，用来把属性值绑定到JavaScript表达式。这里的this.code + '-' + index是一个字符串拼接表达式，直接返回一个字符串作为id的值，完全符合v-bind的语法要求，不需要额外用{}包裹。

而:class里的{}是Vue专门支持的特殊语法，属于class绑定的专属用法，和普通属性绑定的逻辑完全不同。

2. 改成:id="{this.code+'-'+index}"报错的原因？

当你给:id写{this.code+'-'+index}时，Vue会把这个{}解析成对象字面量，但对象的键必须是合法的标识符（比如fav）或者用引号包裹的字符串，而this.code+'-'+index是一个动态表达式，不能直接作为对象的键，这就触发了语法解析错误，控制台才会提示Unexpected token '.'。

另外补充：Vue模板里的表达式默认上下文就是组件实例，其实不需要写this.，直接写code + '-' + index就能正常工作。

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