クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

Vue.js

Vue.js CSSを操作して、スタイルを動的に設定する(v-bind:style)

投稿日:

Vue.jsでもスタイルの操作が可能です。
バインディングもされますので、オブジェクトの値を変えるだけでスタイルを変更することができます。

アイデア次第で面白いものが作れそうですね。
早速簡単なものを作っていきましょう!

今回作成するのはクリックされたら色が変わるサンプルです。

スクリプト(Vue.js CSSを操作して、スタイルを動的に設定する(v-bind:style))

「colors」というオブジェクト配列を用意しておきます。
「bg_color」というキーに色をセットしておき、それをスタイルとしてセットしていくことになります。

クリックされた時に呼び出されるメソッドとして「setRedColor」を用意しておきます。
渡されたオブジェクトの「bg_color」に、渡された色をセットしています。

 

HTML(Vue.js CSSを操作して、スタイルを動的に設定する(v-bind:style))

[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

コード変更や、大きな画面でみたい場合はこちらから。

-Vue.js

執筆者:

関連記事

Vue.js タグの属性値を操作してみよう!サンプル(v-bind)

Vue.jsでは、属性の値を自由に入れ込むことができます。 では「v-bind」を使って目的の属性に値を入れてみましょう! 今回は、imgタグの属性を操作してみようと思います。 スクリプト(Vue.j …

Vue.js クリックで関数を実行させるサンプル(v-on、methods)

Vue.jsのタグに対するイベントは「v-on」を使います。 今回は、ボタンがクリックされた時に関数を実行してみましょう! スクリプト(Vue.js クリックで関数を実行させるサンプル(v-on、me …

Vue.js 双方向バインディングサンプル(v-model)

Vue.jsの強力な機能の1つに、双方向バインディングがあります。 難しそうな名前ですが、簡単に言うとスクリプト側の変数とHTML側の変数を結びつける機能です。 今回作るサンプルは、HTML側の「テキ …

Vue.js 一番簡単なサンプル

Vue.jsが流行しているようですので、勉強していきたいと思います。 まずは公式ページにもある、一番簡単なサンプルを作っていきましょう!   Vue.jsの読み込み(Vue.js一番簡単なサ …

Vue.js for文のような繰り返し処理はどうやるの?サンプル(v-for)

もちろんVue.jsにも繰り返し処理があります。 「v-for」を使います(分かりやすい名前ですね)。 早速、どうやるのか試していきましょう! スクリプト(Vue.js for文のような繰り返し処理は …


  1. […] CSS を操作して、スタイルを動的に設定する (v-bind:style) | クルーデザイン […]

comment

メールアドレスが公開されることはありません。