如何使用 Vue JS 在 HTML 的同一标签中使用“v-if”和“v-else”?

新手上路,请多包涵

我在多个元素中使用 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>

可能吗 ?

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

预先感谢。

原文由 Shankar Thiyagaraajan 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 808
2 个回答

不要使用 v-if ,而是尝试将属性绑定到三元表达式。

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

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

原文由 Joe Clay 发布,翻译遵循 CC BY-SA 4.0 许可协议

您不能在同一元素上使用 v-ifv-else

我个人会使用计算属性。

我假设您的 nb 是反应变量或类似变量。

因此,您应该寻找这样的东西:

 <block v-bind:align="computedAlign"></block>

然后在你的组件中

// assuming you're using data and not props
data() {
  return {
    nb: 1 // default
  }
},
// some other stuff that sets the nb variable in some way
computed: {
  computedAlign() => {
    if (this.nb === 3) {
      return 'left'
    } else {
      return 'center'
    }
  }
}

原文由 darryn.ten 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题