vueで要素のスタイルを動的に変更するにはどうすればよいのか解説します

CSS要素を動的に変化させたい…

こうした悩みを解決します。

姫野秀徳

組み込みエンジニアとしてメーカー勤務10年。
第二種電工事士、基本情報技術者、Code.org認定教師。
microbitを用いた電子工作＆プログラミング教室を開校。
組み込み開発の実際を発信するyoutube活動も行う。

無料で学べる組み込み開発オンラインスクールはじめました！
https://kumicla.tatepro.com

姫野秀徳をフォローする

先に結論

HTML部にv-bind結合したstyleを記述し、そのstyle内に変数を入れてやります。

たとえば、下記のようにstyle属性にnum変数を入れてやるのです。

<div v-bind:style=”‘width: ‘+ num + ‘px'”></div>

これでスタイル（CSS）を動的に変更することができます。

今回やりたいこと

ボタンを押したら要素の座標位置を変更させる

もう少し詳細に言うと、四角を作ってボタン押すと四角の位置を動かしたり、大きさを変えたり、といったことをvueで行います。

サンプル

さっそくですが、コードを示します。

See the Pen vuetest_ボタン操作で要素を動かす by Hidenori Himeno (@hidenori-himeno) on CodePen.

ボタンを押すと上の四角では幅が広がり、下の四角では位置がずれていくことが分かります。

解説

よく分かっておらず、だいぶ苦戦しましたが、結局のところ

HTML部にv-bind結合したstyleを記述し、そのstyle内に変数を入れる

という考え方が大事です。

基本はクラスつけてcssでスタイルを宣言してやればよいのですが、変更する部分だけはHTML側に書かないといけません、たぶん（違うやり方あったら教えてください）。

今回の例でいうと、habaという変数をstyle内に入れておき、ボタンを押したら変数の値を制御して返すことでスタイルが動的に変わります。
habaの初期値は100で、ボタンを押す毎に50ずつ増加します。
このhabaの変化が反映され、黒四角の方はwidth（幅）、青四角の方は位置（left)を動的に変えることができています。

まとめ

vueで要素のスタイルを動的に変更するには 、HTML部にv-bind結合したstyleを記述しそのstyle内に変数を入れる、という考え方が大事です。

立科プログラミングではサイトの新規構築、既存サイトの機能追加・修正、動作不具合解析など行っております。
こういう見た目にしたい、この機能を少し直したいなどお困りのことがあればお問い合わせください！