有没有办法在 Vue JS 的列表渲染（v-for）中使用条件渲染答案

【问题标题】：Is there a way to use Conditional Rendering within List Rendering (v-for) in Vue JS有没有办法在 Vue JS 的列表渲染（v-for）中使用条件渲染
【发布时间】：2020-08-12 03:56:30
【问题描述】：

我在我的项目中使用列表渲染 (v-for) 来打印数组中的每个项目以显示一系列书籍的信息。

但是，我尝试在此循环中使用条件渲染，以便打印许多包含图书类别标签的 li 元素。

如果我的数组中没有存储数据，我不希望在 DOM 中绘制 li。例如，对于第一本书 Moby Dick，书籍标签的 ul 将只包含两个 HTML 列表项。

如何做到这一点？到目前为止，我有以下...

<ul>
    <li v-for="book in books">

        <div class="item">
            <div class="item-bd">
                <h2>{{ book.title }}</h2>
                <ul class="book-tags>
                    <li v-if="">{{book.tagOne}}</li>
                    <li v-if="">{{book.tagTwo}}</li>
                    <li v-if="">{{book.tagThree}}</li>
                </ul>
            </div>
        </div>

    </li>
</ul>


new Vue({
  el: '#app',
  data: {
    books: [
        {
            title: "Moby Dick",
            tagOne: "Kids Book",
            tagTwo: "Fiction",
            tagThree: ""
        },
        {
            title: "Hamlet",
            tagOne: "All Ages",
            tagTwo: "Shakespeare",
            tagThree: "Classic"
        }
    ]
  }
});

【问题讨论】：

将标签放在一个数组中，并使用完全相同的机制 (v-for)。如果你想坚持三个固定标签，只需使用v-if="book.tagOne"。这发生在v-for 列表中的事实一点都不重要，afaik。
@ChrisG 谢谢克里斯。我想我在条件标签中错过了 book.tagOne 等。我还将看看如何使用数组，因为它必须是一种更 DRY 的方法。

标签： javascript vue.js vuejs2

【解决方案1】：

根据您的问题，如果您想保留三个 <li> 项目，那么您只需检查相应的标签是否存在，如下所示：

<ul class="book-tags>
  <li v-if="book.tagOne">{{book.tagOne}}</li>
  <li v-if="book.tagTwo">{{book.tagTwo}}</li>
  <li v-if="book.tagThree">{{book.tagThree}}</li>
</ul>

【讨论】：

我遇到的问题是，如果我更改一个属性（比如说 book.tagOne），组件不会重新渲染。