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

Question

我正在将Vue与Fullcalendar一起使用，并且如果用户所在的月份具有与之关联的日期，则会显示事件的侧边栏。我有，

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