如果没有 v-for 项目，如何有条件地显示消息？

Question

我正在使用带有 Fullcalendar 的 Vue，如果用户所在的月份有与之关联的日期，我会显示一个事件侧边栏。所以我有，

 <div v-for="event in events"> etc etc </div>

如果没有可显示的消息，我如何利用 v-if 和 v-else 有条件地显示“抱歉，本月没有活动”之类的消息？

有点像

 <div v-if="events">
      <div v-for="event in events"> etc etc </div>
 </div>
 <div v-else>Sorry there are no events</div>

为伪代码道歉

Answer 1

与您的示例完全相同，但添加了长度检查：

<div v-if="events && events.length > 0">
      <div v-for="event in events"> etc etc </div>
</div>
<div v-else>Sorry there are no events</div>