javascript - vue v-for 循环，添加类个体

Question

我正在使用 v-for 循环遍历列表并显示该列表。

现在在呈现之后，每个列表都有一个标题和隐藏的内容，我希望能够在我选择该列表的一个标题后显示其内容而不是所有内容。

到目前为止我正在这样做(感谢 @thanksd ):

<div class="link">
  <p @click="show = true"> Click here to show the content </p>
  <div v-show="show" class="content">
    <p>This is the hidden content</p>
  </div>
</div>
<div class="link">
  <p @click="show = true"> Click here to show the content </p>
  <div v-show="show" class="content">
    <p>This is the hidden content</p>
  </div>
</div>

data() {
  return {
    show: false,
  };
}

Answer 1

你可以这样写:

<div class="link" v-for="(item, index) in items" :key="index">
  <p @click="show = index"> Click here to show the content </p>
  <div v-show="show === index" class="content">
    <p>This is the hidden content</p>
  </div>
</div>

如果您正在迭代一个对象，则语法为 v-for="(value, key) in items"。此外，现在推荐的做法是在循环中声明 key。

阅读相关文档 here .