如何在使用Vue JS的HTML中使用「v-if」和「v-else」？

我在多個元素中使用Vue js條件語句。如何在使用Vue JS的HTML中使用「v-if」和「v-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>

這可能嗎？

或者任何其他解決方案來應用此？

提前致謝。

來源

2016-11-30 Shankar Thiyagaraajan

而不是使用v-if，嘗試屬性綁定到一個三元表達。

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

如果看起來有點太亂了，你（或者，如果你想使用的邏輯過於複雜的一條線來表示），你也可以嘗試創建您的組件返回"left"或computed property"center"，然後綁定到那個。

來源

2016-11-30 11:43:45

如此計算財產比這個「如果和其他」更好...？ –

@ShankarThiyagaraajan：我會用一個三元表達式來表達這個簡單的東西，但更多的東西會更易於讀入計算屬性。這是一個風格選擇，做什麼感覺是正確的。 –

@ShankarThiyagaraajan：據我所知，在同一個元素上沒有辦法使用'v-if'和'v-else'，所以我認爲綁定某些東西是唯一的方法。 –

你不能在相同的元素使用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' 
    } 
    } 
}

來源

2016-11-30 14:57:58

你可以簡單地實現與三元運營商

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

來源

2017-12-13 15:36:50

如何在使用Vue JS的HTML中使用「v-if」和「v-else」？

回答

相關問題