今回は、Vue.js で DOM の class や style などの属性を動的に変える方法です。
前回使った、中かっこ２つ {{ msg }}
この記法では、属性の変更はできません。

これはダメってことね。
これを実現するには「ディレクティブ」を使います。

【参考】
Vue.js 公式ドキュメント：宣言的レンダリング

ディレクティブ

ディレクティブとは、Vue.js が提供している特別な属性で、v-bindのように、接頭辞 v- から始まる属性です。
これを使うと、DOMの属性に対して、リアクティブな振る舞いを与えることができます。

実際の、動作サンプルは
こちら。

HTML

v-bind は変数を コロンで繋げて記述した DOM の属性にバインドします。
v-bind:class=”pClass” であれば、変数「pClass」を属性「class」に紐づけます。
今度は中かっこは必要ありません。

JavaScript

data オブジェクトにバインドする変数を定義します。
pClass は文字列ですが、pStyle はオブジェクトで定義しています。
オブジェクトのキーバリューで指定した値が、そのまま DOM の style 属性に反映されます。

CSS

pClass で指定するスタイルを定義しておきます。

起動してみると、上の p タグの文字列は赤色に、下の p タグは太字で青色で表示されます。

データの変更とDOMへの反映

再び、開発者ツールのコンソールから、データを変更してみます。

表示が動的に変更されることがわかると思います。
開発者ツールの Elements で確認すると、v-bind が消えて、class や style 属性に置き換えられていることが確認できます。