时间戳

首页 > 解决方案 > 如何在 vuejs 中使用 javascript 在转换中使用三元运算符？

vue.js - 如何在 vuejs 中使用 javascript 在转换中使用三元运算符？

问题描述

我正在尝试使用 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 语法，它工作得很好。我在这里做错了什么？我需要以不同的方式格式化三元返回的内容吗？

标签： vue.jsconditional-operatorvuejs-transition

解决方案

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

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

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

推荐阅读