イイダリョウのブログ。【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)2019-05-29【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)JSVue.jsの続きです。前回まではJSONファイルの読み込みをしました。今回は属性値の動的な変更をします。v-bindを使ってclass名の追加、削除を行います。クモのようにコツコツとv-bindは属性を指定するディレクティブ以前の記事でv-on、V-if、v-forをやってみた。これら(v-hoge)は「ディレクティブ」というVue.js独自の属性。クモのようにコツコツと今回は別のディレクティブでv-bindをやってみる。v-bindはタグの中の属性を指定するディレクティブ。CodePen.ここに至る道筋を書いていく。v-bind:hrefでURLを指定まずはv-bind:hrefをやってみた。target="_blank">URLをv-bindで指定</a></p></div>#appの中にp要素が2つ一つ目のpにはhref属性に直接URLが書いてある二つ目のpにはv-bind:hrefでmyUrlキーを指定どちらもクリックするとリンクが開く。二つ目がなぜリンクが開くかというとJSでURLを指定している。連想配列myUrlキーの値にURLが入っているこれでmyUrlにURLが紐付けられている。これだけだとあまり恩恵がわからない。href属性に直接URL書いた方が楽じゃん?という感想。次にv-bind:styleやってみた。CSSスタイルを指定する。myColor}">v-bindでスタイル指定</p></div>#appの中にp要素が2つ一つ目のpにはclass名blueに対してCSSファイルにスタイルを書いている。blue;}一つ目のpのCSSは文字色blue。二つ目のpはJSの中でCSSスタイルを指定。連想配列myColorキーの値に値が入っているうーむ、確かにスタイル効いた。効いたけれども!まだ恩恵がよくわからねぃ。CSSスタイルはCSSファイルに書いた方がメンテナンス上よろしいのではないだろうか??期待してたのはこういうことじゃないんだよなー、なんつうか、動的に変化をさせたいというか。phiaryボタンを押すと文字の色が変わる。class名の追加、削除を交互に繰り返す動き!作ってみた。CodePen.そう、これこれ!jQueryでよくやってたaddClass()とかtoggleClass()みたいな動き!これがやりたかった。#000;}文字色は黄色、背景は黒だが、ページロードの時点ではまだこのclassは当たっていない。ボタンを押すとclassが当たる。その動きはJSで指定している。連想配列active01キーの値falseこれでページロード時はactive01はfalseでclassが当たらない。ボタンを押すとfalseとtrueが切り替わるため、class名の追加、削除を繰り返す。うむ、スタイルはCSSファイルに書いて、JSはクリックイベントv-on:clickとclass名の紐づけv-bind:classという切り替えスイッチの役割になった。複数ボタンで「北斗の名言」を表示するもう少し改造してみる。ボタンの数を増やして、ボタンクリックによってclassを当てる先も2箇所に増やしてみた。CodePen.各ボタンをクリックすると、ボタンの文字色が変わると同時にそのキャラの名言が現れる。serifの属性はv-bind:classで、キーにbuttonと同じ固有の番号が振ってある。textの中の.activeを表示に(初期は当たっていない)初期は.activeがないのでボタンの文字色赤や名言の表示のCSSが当たっていない。ボタンをクリックすると.activeの追加、削除が交互に繰り返す。その設定はJSにある。連想配列の中active01〜active05キーの値は全てfalse一つのクリックで複数箇所にclass名を追加できたのでもう少し凝ったこともできそう!最後にということで、最初はいまいち使い道がわからなかったv-bindですがv-onのクリックイベントと組み合わせるといろいろなことができることがわかりました!次回は同じくディレクティブのv-modelを使ってユーザーの入力操作による動的なページ変更をやってみたく。先日、Youtubeで初ライブ配信を行いました!いつも愛用している...2019-09-11【Vue.js】Vuetifyにパンくず、スライダー、タイル、アコーディオン、カレンダーを配置(v-...Vue.jsの続きです。前回はVuetifyのヘッダー、フッターを配置し...2019-08-22【Vue.js】コンポーネントにpropsオプションで値を渡すVue.jsシリーズの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。