HTML5テクニカルノート

Vue.js入門 02: 要素のclass属性を動的に変える

ID: FN1702005
Technique: HTML5 / JavaScript
Library: Vue.js 2.1.10

Vue.jsには、アプリケーションとHTMLドキュメントの要素の間で互いにデータを参照し合う「バインディング」の機能があります(「Vue.js入門 01: Vue.jsを始める」参照)。要素の属性も、バインディングで動的に変えられます。そこで、要素のclass属性をインタラクティブに定めて、スタイルを切り替えてみましょう。

[注記] 本稿はVue.js 2.6とECMAScript 2015(ES6)にもとづく「Vue.js + ES6入門 02: 要素のclass属性を動的に変える」に改訂しました。

01 入力フィールドにバインディングを定める

以下のコード001は、Vue.jsで<input>要素の入力フィールドをページの要素のテキストにバインディングします。基本的な組み立ては、「Vue.js入門 01: Vue.jsを始める」のコード002と同じです(Vue.jsのインストールと設定を含めてコードの内容については「Vue.js入門 01」をお読みください)。<script>要素の中身を、コード001のように書き替えました。入力フィールドに書いたテキストが、チェックボックスの右側に示されます(図001)。

図001■入力フィールドのテキストがページの項目に示される

コード001■<input>要素のフィールドへの入力を別の要素のテキストにバインディングする

<body>要素


<div id="app" class="container">
	<h2>Todo</h2>
	<ul class="list-unstyled">
		<li>
			<label>
				<input type="checkbox" />
				<span >{{todo}}</span>
			</label>
		</li>
	</ul>
	<p>
		<input type="text" v-model="todo" placeholder="add a todo here" />
	</p>
</div>
<script>
var app = new Vue({
	el: '#app',
	data: {
		todo: ''
	}
});
</script>

02 バインディングでクラス属性を動的に変える

v-bindディレクティブは、プロパティや属性をバインディングします。v-bind:classの構文では、class属性が動的に切り替えられます。バインディングでHTMLコードに与えるスタイル(クラスdone)をつぎのように定めましょう。

<style>要素


.done {
	text-decoration: line-through;
	color: grey;
}

<style>要素の新たなクラス(done)は、HTMLコードの要素には与えられていません。Vue.jsで動的に定めるからです。チェックボックスの<input>要素(type属性"checkbox")の値を、以下のようにv-modelディレクティブでバインディングし、そのプロパティ(done)と初期値(false)をVue()コンストラクタの引数オブジェクトに与えます。そのうえで、v-bind:classにクラスとバインドするプロパティを定めましょう。これでクラスは、プロパティ値がtrueのとき適用され、falseでは適用されないというように、動的に切り替わるのです。

v-bind:class="{クラス: プロパティ}"

<body>要素


<div id="app" class="container">

	<label>
		<input type="checkbox" v-model="done" />
		<span v-bind:class="{'done': done}" >{{todo}}</span>
	</label>

</div>
<script>
var app = new Vue({

	data: {
		todo: '',
		done: false
	}
});
</script>

前掲コード001では、入力フィールドに書いたテキストがチェックボックスの右に示されました。さらに、チェックボックスをチェックすると、新たなクラス(done)のスタイルが割り当てられます(図002)。<body>要素の記述は、以下のコード002にまとめました。併せて、コードを試すためのサンプル001も以下に掲げてあります。

図002■チェックボックスをチェックするとテキストはグレーになって打ち消し線が引かれる

コード002■<input>要素のクラスをバインディングして動的に切り替える

<body>要素


<div id="app" class="container">
	<h2>Todo</h2>
	<ul class="list-unstyled">
		<li>
			<label>
				<input type="checkbox" v-model="done" />
				<span v-bind:class="{'done': done}" >{{todo}}</span>
			</label>
		</li>
	</ul>
	<p>
		<input type="text" v-model="todo" placeholder="add a todo here" />
	</p>
</div>
<script>
var app = new Vue({
	el: '#app',
	data: {
		todo: '',
		done: false
	}
});
</script>

サンプル001■<input>要素のクラスをバインディングして動的に切り替える

See the Pen Vue.js: Class Binding by Fumio Nonaka (@FumioNonaka) on CodePen.

作成者: 野中文雄
作成日: 2016年2月16日