0

我正在尝试使用 vuejs 和 gsap 在 h2 之间实现非常基本的幻灯片。根据方向(下一张和上一张幻灯片),我需要 2 种不同类型的转换。为了获得紧凑的代码,我使用了三元运算符?:

   <transition :css="false" @enter="direction ? enterNext : enterPrev">
     <h2 :key="currentPage.id">
       <NuxtLink
         :to="currentPage.to"
         :title="currentPage.longTitle"
         exact-active-class="is-active"
       >
         {{ currentPage.title }}
       </NuxtLink>
     </h2>
   </transition>

如果我使用 2 div 和 v-if / v-else 语法,它工作得很好。我在这里做错了什么?我需要以不同的方式格式化三元返回的内容吗?

4

1 回答 1

1

@enter是一个事件处理程序。你可以在这里传递一个函数名@enter="enterNext"(这可能是你以前做过的)或有效的 JS 代码片段,比如@enter="enterNext($event)"(函数调用)

您的三元组没有返回任何内容,因为它缺少return语句。

无论如何,您可能想要的是:@enter="direction ? enterNext() : enterPrev()"

于 2021-03-13T15:28:36.213 回答