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。

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

如果你看起来有点过于混乱（或者你想要使用的逻辑太复杂而无法在一行中表达），你也可以尝试在组件中创建computed property，返回{{ 1}}或"left"，然后绑定到它。

Answer 2

您不能在同一元素上使用v-if和v-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'
    }
  }
}

Answer 3

您可以使用三元运算符

来实现这一目标

<block :align="nb==3?'right':'left'"></block>

如何使用＆＃34; v-if＆＃34;和＆＃34; v-else＆＃34;在使用Vue JS的HTML中使用相同的标签？

3 个答案: