vue.js タグに対しdataプロパティの値によって属性を付与するorしないを切り替える方法

Question

<div @if($val) class="active" @endif> </div>

例えばlaravelのifディレクティブを使用したとき↑のような記述で、変数valの値によって
クラスactiveを付与するかしないか切り替えられるのですが
vueでこのようなことはどう実現するでしょうか？よろしくお願いいします。

Answer 1

Vueの場合、以下のような記述となります。
valがtrueの場合、class activeを付与します。

<div v-bind:class="{ 'active' : val }"> </div>

また、v-bind省略可能です。
以下のように記述もできます。(:がv-bindの意)

<div :class="{ 'active' : val }"> </div>