[Nuxt.js, Vue] v-onでv-bindと同じように条件分岐する。

v-bindで三項演算子を使い条件分岐する方法はたくさん紹介されていたのですが、
v-onで三項演算子を使った例が見つけられず、半信半疑で書いてみたら普通に使えたので、その備忘録。

###まずはv-bindで三項演算子

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

これは、常にerrorClassは適応されており、さらにisActiveがtrueの時だけactiveClassが効く。
詳しくはこちら：クラスとスタイルのバインディング

###v-onで三項演算子

<div v-on:click="isActive ? unclick() : click()"></div>

これは、isActiveがtrueの時はunclick()関数が動き、isActiveがfalseの時はclick()関数が動く。

###活用例
.idと.nameを持ったitemList配列がv-forで並べられており、
itemがselectedListに含まれていたら、
unclick(item.id)、cssはitem-selectedが適用される。

含まれていなかったら、
click(item.id)、cssはitemが適用される。

unclick()、click()はそれぞれselectedListからitem.idを削除、追加する処理が書かれている。

<li
v-for="item in itemList"
:key="item.id"
v-on:click="selectedList.includes(item.id)　? unclick(item.id)　: click(item.id)"
v-bind:class="selectedList.includes(item.id) ? 'item-selected' : 'item'"
>
{{ item.name }}
</li>