「Vue.js」でv-ifを使わず、条件分岐をする

初めましてblueです。

Vue.jsを業務で使用していて、v-forの中などに条件分岐を使用したいことがありました。

公式には

2 つを同じエレメントで利用している場合、v-ifはv-forより優先されます。

構文の曖昧さにより、同じエレメントで両方の使用を避けることをお勧めします。

このように書かれており、
同じエレメントで使用するのを推奨されていません。

v-ifとv-forを一緒に使用する場合、

<div v-if>
 <div v-for>テキスト</div>
</div>

または

<div v-for>
  <div v-if>テキスト</div>
</div>

このようにする必要があると思います。
まだVue.jsは初心者なので、これ以外にも方法があるかもしれません。

しかし、divタグ内に条件分岐をしたい場合があると思うので、

 私は3項演算子を使いました。

<div :style="[{color: (number == '1') ? 'red' : 'blue' }]">テキスト</div>

こうすることでdivタグの中で条件分岐が出来ます。