v-bind:classとcomputed
v-bind:classにオブジェクトを渡すことで、クラスを動的に切り替えることが可能です。
<div v-bind:class="{ active : loggedIn }"> <p>投稿する</P> </div>
渡すオブジェクトを算出プロパティとして作成すると、より複雑な処理が可能になります。
<div v-bind:class="classObject"> <p>投稿する</P> </div>
vueファイル
data: { loggedIn: true, error: null }, computed: { classObject: function () { return { active: this.loggedIn && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } }
もちろんstoreの値を参照することも可能。