読者です 読者をやめる 読者になる 読者になる

TechVit@はてな支店

個人の技術メモ

Vue.jsをif-elseifのように扱う方法

http://cdn-ak.f.st-hatena.com/images/fotolife/i/ie-kau/20150818/20150818232251.png

Vue.js1.0.0

Vue.jsを利用したての頃、複数の条件分岐を求められた際に悩んだことがあります。
例えば、セレクトボックスで選択されたアイテムにごとに表示内容を切り替えたい場合です。

通常LL言語であればif文・elseif文で複数の条件式を組み合わせられますが、Vue.jsのドキュメントを見る限りそのような記法はありませんでした。

対策

そのときは選択肢が少なかったこともあり、
v-modelとvalueを直接指定して条件分岐させました。

var demo = new Vue({
    el: '#demo',
    data: {
        selectItem: null
    }
});
<select v-model="selectItem">
      <option value="aaa">AAA</option>
      <option value="bbb">BBB</option>
      <option value="ccc">CCC</option>
</select>

<div v-if="selectItem === 'aaa'"></div>
<div v-if="selectItem === 'bbb'"></div>
<div v-if="selectItem === 'ccc'"></div>

さらに複雑な条件が求められればこの方法では苦しくなるでしょうが、
手軽に進めたいときは今でもこの方法を使っています。