Vue.jsを始める」参照)。要素の属性も、バインディングで動的に変えられます。そこで、要素のclass属性をインタラクティブに定めて、スタイルを切り替えてみましょう。01」05「JavaScriptコードを<head>要素に書く」では、DOMContentLoadedイベントにより、DOM要素が読み込まれてから、リスナー関数の中でVueインスタンスを初期化しました。Vueインスタンスはつくっておいて、あとからDOM要素に関連づけることもできます。そのために用いるのが、vm.$mount()メソッドです。引数には要素の参照、またはセレクタの文字列を渡します。DOMContentLoadedイベントのリスナーは、このメソッドだけ呼び出せばよいのです。ひとつ大切なことは、Vue()コンストラクタの引数に、elオプションは与えないでください。入力フィールドにバインディングを定める以下のコード001は、Vue.jsで<input>要素の入力フィールドをページの<li>要素のテキストにバインディングします。01」のコード002「<input>要素の値をバインディングしてページに表示する」と同じです入力フィールドに書いたテキストが、チェックボックスの右側に示されます(図001)。バインディングでクラス属性を動的に変えるv-bindディレクティブは、プロパティや属性をバインディングします。class属性を動的に切り替えるのが、v-bind:classの構文です。クラスバインディングでHTMLコードに与える処理済み項目のスタイル(クラスdone)を、つぎのコード002のように定めましょう。grey;}<style>要素の新たなクラス(done)は、HTMLコードの要素には与えられていません。Vue.jsで動的に定めるからです。チェックボックスの<input>要素(type属性"checkbox")の値を、以下のようにv-modelディレクティブでバインディングし、そのプロパティ(done)と初期値(false)をVue()コンストラクタの引数オブジェクトにdataオプションで与えます。そのうえで、v-bind:classにクラスとバインドするプロパティを定めましょう。これでクラスは、プロパティ値がtrueのとき適用され、falseでは適用されないというように、動的に切り替わるのです。false}});前掲コード001では、入力フィールドに書いたテキストがチェックボックスの右に示されました。チェックボックスをチェックすると、新たなクラス(done)のスタイルが割り当てられます(図002)。<body>要素と<script>要素の記述は、以下のコード003にまとめました。併せて、コードを試すためのサンプル001も以下に掲げてあります。要素のclass属性を動的に変える」を全面改訂。