Vue.jsでもスタイルの操作が可能です。
バインディングもされますので、オブジェクトの値を変えるだけでスタイルを変更することができます。
アイデア次第で面白いものが作れそうですね。
早速簡単なものを作っていきましょう！
今回作成するのはクリックされたら色が変わるサンプルです。
スクリプト（Vue.js CSSを操作して、スタイルを動的に設定する（v-bind:style））
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var app = new Vue({ el: '#app', data: { colors: [ { bg_color : "pink"}, { bg_color : "orange"}, { bg_color : "blue"}, { bg_color : "yellow"}, { bg_color : "green"} ] }, methods: { setRedColor: function (obj, color) { obj['bg_color']=color; } } }) |
「colors」というオブジェクト配列を用意しておきます。
「bg_color」というキーに色をセットしておき、それをスタイルとしてセットしていくことになります。
クリックされた時に呼び出されるメソッドとして「setRedColor」を用意しておきます。
渡されたオブジェクトの「bg_color」に、渡された色をセットしています。
HTML（Vue.js CSSを操作して、スタイルを動的に設定する（v-bind:style））
|
1 2 3 4 5 6 7 8 9 |
<div id="app"> <div class="clearfix"> <div v-for="obj in colors" class="palette" v-bind:style="{background:obj.bg_color}" v-on:click="setRedColor(obj, 'red')"> </div> </div> </div> |
[3行目]
「v-for」でオブジェクト配列をループさせます。
[4行目]
「v-bind:style」でスタイルの設定ができます。
今回は「background」に「bg_color」を設定しています。
[5行目]
「v-on:click」でクリックイベントを設定しています。
クリックされたら「setRedColor」メソッドが呼び出されることになります。
引数として、「obj（ループされている時のオブジェクト）」、「red」を指定しています。
これにより、クリックされた「div」 の「background」が「red」になります。
サンプルを見てもらえると分かりやすいと思います。
是非見てくださいね。
See the Pen Vue.js CSSを操作して、スタイルを動的に設定する（v-bind:style） by clue-design (@clue-design) on CodePen.0
コード変更や、大きな画面でみたい場合はこちらから。
[…] CSS を操作して、スタイルを動的に設定する (v-bind:style) | クルーデザイン […]