如果沒有 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>