javascript - 有没有办法在 Vue JS 的列表渲染(v-for)中使用条件渲染

Question

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

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

我不想要li如果我的数组中没有存储数据，则在 DOM 中绘制。例如，对于第一本书《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"
        }
    ]
  }
});

Answer 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>