以下の基本テンプレートに実際にコードを書き加えながら学習していきます。index.htmlというファイル名でデスクトップに保存して準備をしましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【Vue.js】クラスとスタイルのバインディング学習</title> <style> </style> </head> <body> <div id="app"> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> new Vue({ el: '#app', }) </script> </body> </html> |
HTMLクラスのバインディングの基本構文
基本的な構文はつぎのとおりです。
<div v-bind:class=“{ active: isActive }”>Hello</div>
この場合、activeがクラス名になります。isActiveには真偽値が入ります。isActiveの値がtrueであれば、activeクラスが有効になります。falseであれば、activeクラスは無効になります。
では、実際に動きをみてみましょう。コードを追加してブラウザで開いてみてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【Vue.js】クラスとスタイルのバインディング学習</title> <style> /* ここから追加 ③ */ .active { color: #f00; } /* ここまで追加 ③ */ </style> </head> <body> <div id="app"> <!-- ここから追加 ① --> <div v-bind:class="{ active: isActive }">Hello Vue.js!</div> <!-- ここまで追加 ① --> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> new Vue({ el: '#app', // ここから追加 ② data: { isActive: true, }, // ここまで追加 ② }) </script> </body> </html> |
以下のような赤色の文字が表示されれば成功です。
動作の流れを見ていきましょう。
まず、①の部分でHTMLクラスをバインディングしています。つぎにisActiveキーの真偽値を②の部分で確認しています。isActiveの値がtrueなので、activeクラスが有効になります。activeクラスが有効なので、③のスタイルが適用されます。
ハイフンを含んだクラス名をバインディングする場合、命名に注意が必要です。例えば、.box-colorというクラス名であれば、「v-bind:class=”{ ‘box-color’: isActive }”」のようにシングルクォートで囲む必要があります。
オブジェクトはインラインでなくても問題ありません
「v-bind:class=”{ active: isActive }”」の「{ active: isActive }」の部分はつぎのように参照の形で表現することもできます。
1 | <div v-bind:class="classObject">Hello Vue.js!</div> |
1 2 3 4 5 | data: { classObject: { active: true, }, }, |
v-bind:classディレクティブはプレーンなclass属性と共存可
つぎのように、v-bind:classディレクティブはプレーンなclass属性と共存できます。
1 2 3 | <div class="static" v-bind:class="{ active: isActive }">Hello</div> |
isActiveが真の場合、実行するとつぎのように描画されます。staticクラス、activeクラスの両方が描画されていることが確認できます。
<div class=”static active”>Hello</div>
以上が、HTMLクラスのバインディングの基本です。
インラインスタイルのバインディングの基本構文
インラインスタイルをバインディングすることもできます。基本的な構文はつぎのとおりです。
<div v-bind:style=“{ color: activeColor }”>Hello</div>
テンプレートにコードを書いてみましょう。①のactiveColorとactiveFontSizeで②のdataオプションのプロパティを参照しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【Vue.js】クラスとスタイルのバインディング学習</title> <style> </style> </head> <body> <div id="app"> <!-- ここから追加 ① --> <div v-bind:style="{ color: activeColor, 'font-size': activeFontSize + 'px' }">Hello Vue.js!</div> <!-- ここまで追加 ① --> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> new Vue({ el: '#app', // ここから追加 ② data: { activeColor: 'green', activeFontSize: 24, }, // ここまで追加 ② }) </script> </body> </html> |
v-bind:classディレクティブ同様、CSSのプロパティ名にハイフンを含む場合はプロパティ名をシングルクォートで囲む(‘font-size’)か、またはキャメルケース(fontSize)で表記する必要があります。
v-bind:styleディレクティブもオブジェクトはインラインでなくてもOK
v-bind:styleディレクティブのプロパティが多くなるとコードが見づらくなってしまうので、つぎの例のようにdataオプション内のプロパティを参照することもできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>【Vue.js】クラスとスタイルのバインディング学習</title> <style> </style> </head> <body> <div id="app"> <!-- ここから追加 ① --> <div v-bind:style="styleObject">Hello Vue.js!</div> <!-- ここまで追加 ① --> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> new Vue({ el: '#app', // ここから追加 ② data: { styleObject: { color: '#f00', fontWeight: 'bold', }, }, // ここまで追加 ② }) </script> </body> </html> |
v-bind:styleディレクティブから複数のスタイルオブジェクトを参照する方法
v-bind:styleディレクティブの値を配列にすることで複数のスタイルオブジェクトを参照することができます。
1 | <div v-bind:style="[styleObject, styleObject2]">Hello Vue.js!</div> |
1 2 3 4 5 6 7 8 9 | data: { styleObject: { color: '#f00', fontWeight: 'bold', }, styleObject2: { textDecoration: 'underline', }, }, |
ToDoアプリを作ってみよう
class・styleバインディングは実際のWebアプリではどのようなところに使われているのでしょうか。ToDoアプリを例にして確認してみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ToDoApp - 【Vue.js】クラスとスタイルのバインディング学習</title> <style> body{ font-size: 16px; margin: 0; } #app h1{ font-size: 2em; background-color: #222; color: #fff; margin: 0; padding: .5em; } .todo-box ul{ margin: 0; padding: 0; list-style: none; } .todo-box li{ line-height: 2; border-bottom: 1px solid #eee; padding: 1em; } .todo-box li > label { font-size: 1em; cursor: pointer; } /* クラスバインディングの判定が真であれば.doneクラスが適用されます */ .todo-box li > label.done { text-decoration: line-through; color: #ddd; } /* クラスバインディングの判定が真であれば.doneクラスが適用されます */ .btn-del { font-size: .8em; color: #fff; display: inline-block; text-align: center; cursor: pointer; margin-left: .5em; background-color: #555; line-height: 1; padding: .45em 1em; box-sizing: border-box; } .btn-del:hover { color: #555; background-color: #fff; border: 1px solid #555; } form { background-color: #eee; padding: 1.5em 1em; } </style> </head> <body> <div id="app"> <h1>ToDoApp</h1> <div class="todo-box"> <ul> <li v-for="(todo, index) in todos"> <input type="checkbox" v-model="todo.isDone" v-bind:id="index"> <!-- ここでクラスバインディングを使っています --> <label v-bind:class="{ done: todo.isDone }" v-bind:for="index"> {{ todo.title }} </label> <!-- ここでクラスバインディングを使っています --> <span v-on:click="deleteItem(index)" class="btn-del">Delete</span> </li> </ul> <form v-on:submit.prevent="addItem"> <input type="text" v-model="newItem"> <input type="submit" value="Add Item"> </form> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> new Vue({ el: '#app', data: { newItem: '', todos: [ { title: 'MyTask01', isDone: false, // クラスバインディングの真偽値 }, { title: 'MyTask02', isDone: false, // クラスバインディングの真偽値 }, { title: 'MyTask03', isDone: false, // クラスバインディングの真偽値 }, ], }, methods: { addItem: function(){ var item = { title: this.newItem, isdone: false, }; this.todos.push(item); this.newItem = ''; }, deleteItem: function(index) { this.todos.splice(index, 1); }, }, }); </script> </body> </html> |
上のコードをブラウザで開くと、つぎのような画面が表示されましたか？
チェックボックスにチェックを入れてみましょう。
チェックを入れると以下の画像のように「MyTask」文字が薄くなってさらに取り消し線が引かれます。この部分でclassバインディングが使われています。
