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。

Answer 2

有很多方法可以做到这一点，如果你要构建将列出内容的变量，那么它就更容易了

<div class="link" v-for="link in links">
  <p @click="link.show = true"> Click here to show the content </p>
  <div v-show="link.show" class="content">
    <p>{{ link.content }}</p>
  </div>
</div>

data() {
  return {
    links: [{
        title: 'the title',
        content: 'the hidden content',
        show: false,
    },{
        title: 'the other title',
        content: 'the other hidden content',
        show: false,
    },]
  };
}

Answer 3

如果您还希望在用户第二次点击它时隐藏它，则需要添加三元比较＆＃34; show === index？ show = -1：show = index＆＃34;到@Leo回答：

<div class="link" v-for="(item, index) in items" :key="index">
  <p @click="show === index ? show = -1 : 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>

data() {
  return {
    show: -1,
  };
}

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

3 个答案: