javascript - 如何使用 Vue JS 在 HTML 的同一标记中使用 "v-if"和 "v-else"？

Question

我在多个元素中使用 Vue js 条件语句。

在某些情况下，我需要将 if 和 else 放在同一个元素中以过滤元素。

在这里，我使用多个元素来应用 if 和 else。

   <block v-if="nb == 3" align="left"></block>
   <block v-if="nb > 3" align="center"></block>

但我想在单个元素中同时应用这两个元素，例如，

  <block v-if="nb == 3" align="left" v-else align="center"></block>

这可能吗？

或者任何其他解决方案来应用这个？

提前致谢。

Answer 1

与其使用 v-if，不如尝试将属性绑定(bind)到三元表达式。

// : is a shorthand for v-bind:
<block :align="nb == 3 ? 'left' : 'center'"></block>

如果这对您来说看起来有点太乱(或者如果您要使用的逻辑太复杂而无法在一行中表达)，您也可以尝试创建一个 computed property在返回 "left" 或 "center" 的组件中，然后改为绑定(bind)到它。