Question

我想知道如何使用Vuejs输出条件子列表。在此示例中，并非所有主题都具有子主题。

new Vue ({
    el: '#maincontainer',
    data: {
        topics: [
            { topicname: 'Introduction' },
            { topicname: 'First Chapter', 
                subtopics: [
                    {subtopicname: 'Test'}
                ]
            },
        ]
    }
});

到目前为止，我的HTML看起来像这样：

<li v-for="topic in topics" id="item-{{$index}}">
    {{ topic.topicname }} 
     <ul>
       <li v-for="subtopic in subtopics">
         {{ subtopic.subtopicname }}
       </li>
     </ul>
</li>

如果数据中有一个子列表，我怎么可以选择添加一个子列表？

Answer 1

v-if是用于条件渲染的指令。

在这里你也可以使用v-if='topic.subtopic'（只要表达式的值在subtopic存在的情况下评估为真实的布尔值。）

<li v-for="topic in topics" id="item-{{$index}}">
{{ topic.topicname }} 
   <ul v-if='Array.isArray(topic.subtopic)'>
     <li v-for="subtopic in topic.subtopics">
       {{ subtopic.subtopicname }}
     </li>
   </ul>
 </li>

您可能也对v-else

感兴趣

使用VueJS使用条件子阵列

1 个答案: