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を使用するのではなく、属性を3進表現にバインドしてみてください。

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

それがあなたのために少しあまりにも乱雑に見える場合（または使用したいロジックは1行で表現するにはあまりにも複雑である場合）、あなたも"left"かを返すコンポーネントでcomputed propertyを作成してみてください"center"とし、その代わりにバインドします。

Answer 2

v-ifとv-elseを同じ要素に使用することはできません。

私は個人的に計算されたプロパティを使用します。

私はあなたのnbが反応変数または類似していると仮定しています。

は、したがって、あなたはこのような何かを探している必要があります：あなたは、単に三項演算子でそれを達成でき

// 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 v-bind:align="computedAlign"></block> 

と

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