Vue.jsの続きです。前回まではJSONファイルの読み込みをしました。今回は属性値の動的な変更をします。v-bind
を使ってclass名の追加、削除を行います。それではいきましょう!
【目次】
- v-bindは属性を指定するディレクティブ
- v-bind:hrefでURLを指定
- v-bind:syleでCSSスタイルを指定
- v-bind:classでclass名の追加、削除
- 複数ボタンで「北斗の名言」を表示する
- 最後に
※前回:【Vue.js】axiosでJSONファイルを読み込む(はっぴいえんど編) - クモのようにコツコツと
v-bindは属性を指定するディレクティブ
以前の記事でv-on
、V-if
、v-for
をやってみた。これら(v-hoge
)は「ディレクティブ」というVue.js独自の属性。
※参考:【Vue.js】イベント(v-on)、分岐(v-show、v-if)、ループ(v-for)をやってみた! - クモのようにコツコツと
今回は別のディレクティブでv-bind
をやってみる。v-bind
はタグの中の属性を指定するディレクティブ。
今回作ったもの
See the Pen Vue.js v-bind 04 by イイダリョウ (@i_ryo) on CodePen.
ここに至る道筋を書いていく。
v-bind:hrefでURLを指定
まずはv-bind:href
をやってみた。URLを指定できた。
See the Pen Vue.js v-bind 01 by イイダリョウ (@i_ryo) on CodePen.
<h2>Vue.jsのv-bind</h2> <div id="app"> <p><a href="https://www.i-ryo.com/" target="_blank">URLを直接指定</a></p> <p><a v-bind:href="myUrl" target="_blank">URLをv-bindで指定</a></p> </div>
#app
の中にp
要素が2つ- 一つ目の
p
にはhref
属性に直接URLが書いてある - 二つ目の
p
にはv-bind:href
でmyUrl
キーを指定
どちらもクリックするとリンクが開く。二つ目がなぜリンクが開くかというとJSでURLを指定している。
new Vue ({ el: '#app', data:{ myUrl: 'https://www.i-ryo.com/' } })
- Vueのインスタンス作成
el
キーで#app
を紐付けdate
キーの中に連想配列- 連想配列
myUrl
キーの値にURLが入っている
これでmyUrl
にURLが紐付けられている。
でも、これだけだとあまり恩恵がわからない。href
属性に直接URL書いた方が楽じゃん?という感想。
v-bind:syleでCSSスタイルを指定
次にv-bind:style
やってみた。CSSスタイルを指定する。
See the Pen Vue.js v-bind 02 by イイダリョウ (@i_ryo) on CodePen.
<h2 >Vue.jsのv-bind</h2> <div id="app"> <p class="blue">CSSでスタイル指定</p> <p v-bind:style="{color: myColor}">v-bindでスタイル指定</p> </div>
#app
の中にp
要素が2つ- 一つ目の
p
にはclass名blue
に対してCSSファイルにスタイルを書いている。 - 二つ目の
p
にはv-bind:style
でcolor
プロパティの値をmyColor
キーで指定
.blue { color: blue; }
一つ目のp
のCSSは文字色blue
。
二つ目のp
はJSの中でCSSスタイルを指定。
new Vue ({ el: '#app', data:{ myColor: 'red' } })
- Vueのインスタンス作成
el
キーで#app
を紐付けdate
キーの中に連想配列- 連想配列
myColor
キーの値に値が入っている
うーむ、確かにスタイル効いた。効いたけれども!まだ恩恵がよくわからねぃ。。
CSSスタイルはCSSファイルに書いた方がメンテナンス上よろしいのではないだろうか??
期待してたのはこういうことじゃないんだよなー、なんつうか、動的に変化をさせたいというか。。
v-bind:classでclass名の追加、削除
と思いながら、引き続き調べていたら、やりたいことを実現している記事があった!
※参考:vue.js tips - v-bind:class を使って class の on/off を切り替えよう | phiary
ボタンを押すと文字の色が変わる。class名の追加、削除を交互に繰り返す動き!作ってみた。
See the Pen Vue.js v-bind 03 by イイダリョウ (@i_ryo) on CodePen.
そう、これこれ!jQueryでよくやってたaddClass()
とかtoggleClass()
みたいな動き!これがやりたかった。
HTMLはこちら
<div id="app"> <div class="btn"> <button v-on:click='active01=!active01' v-bind:class='{active:active01}'>押して!</button> </div> </div>
#app
の中に.btn
、その中にbutton
要素button
の属性v-on:click
でクリックするとactive01
の値が!
によってon(true
)とoff(false
)が切り替わる(反対になる)button
の属性v-bind:class
でclass名active
がactive01
キーの値がon(true
)になると追加される
.active
のCSSはこちら
.btn .active { color: yellow; background-color: #000; }
文字色は黄色、背景は黒だが、ページロードの時点ではまだこのclassは当たっていない。ボタンを押すとclassが当たる。その動きはJSで指定している。
JSはこちら
new Vue ({ el: '#app', data: { active01: false } })
- Vueのインスタンス作成
el
キーで#app
を紐付けdate
キーの中に連想配列- 連想配列
active01
キーの値false
これでページロード時はactive01
はfalse
でclassが当たらない。ボタンを押すとfalse
とtrue
が切り替わるため、class名の追加、削除を繰り返す。
うむ、スタイルはCSSファイルに書いて、JSはクリックイベントv-on:click
とclass名の紐づけv-bind:class
という切り替えスイッチの役割になった。
複数ボタンで「北斗の名言」を表示する
もう少し改造してみる。ボタンの数を増やして、ボタンクリックによってclassを当てる先も2箇所に増やしてみた。
See the Pen Vue.js v-bind 04 by イイダリョウ (@i_ryo) on CodePen.
各ボタンをクリックすると、ボタンの文字色が変わると同時にそのキャラの名言が現れる。
HTMLはこちら
<div id="app"> <div class="btn"> <button class="name" v-on:click='active01=!active01' v-bind:class='{active:active01}'>ラオウ</button> <button class="name" v-on:click='active02=!active02' v-bind:class='{active:active02}'>トキ</button> <button class="name" v-on:click='active03=!active03' v-bind:class='{active:active03}'>ジャギ</button> <button class="name" v-on:click='active04=!active04' v-bind:class='{active:active04}'>ケンシロウ</button> <button class="name" v-on:click='active05=!active05' v-bind:class='{active:active05}'>モヒカン</button> </div> <ul class="text"> <li class="serif" v-bind:class='{active:active01}'> ラオウ「我が人生、一片の悔いなし!」</li> <li class="serif" v-bind:class='{active:active02}'> トキ「愛するがゆえに見守る愛もある」</li> <li class="serif" v-bind:class='{active:active03}'> ジャギ「俺の名前を言ってみろ!」</li> <li class="serif" v-bind:class='{active:active04}'> ケンシロウ「お前はもう、死んでいる」</li> <li class="serif" v-bind:class='{active:active05}'> モヒカン「あべし!」</li> </ul> </div>
#app
の中にdiv
要素(.btn
)とul
要素(.text
).btn
の中にbutton
が5つbutton
の属性は先ほどと同じv-on:click
とv-bind:class
だが、キー名に固有の番号が振ってある.text
の中にli
要素(. serif
)が5つ. serif
の属性はv-bind:class
で、キーにbutton
と同じ固有の番号が振ってある。
CSSの設定
.serif { display: none; } .btn .active { color: red; } /*中略*/ .text .active { display: block; }
.serif
の初期は非表示.btn
の中の.active
の文字色は赤(初期は当たっていない). text
の中の.active
を表示に(初期は当たっていない)
初期は.active
がないのでボタンの文字色赤や名言の表示のCSSが当たっていない。ボタンをクリックすると.active
の追加、削除が交互に繰り返す。その設定はJSにある。
new Vue ({ el: '#app', data:{ active01: false, active02: false, active03: false, active04: false, active05: false } })
- Vueのインスタンス作成
el
キーで#app
を紐付けdate
キーの中に連想配列- 連想配列の中
active01
〜active05
キーの値は全てfalse
一つのクリックで複数箇所にclass名を追加できたのでもう少し凝ったこともできそう!
最後に
ということで、最初はいまいち使い道がわからなかったv-bind
ですがv-on
のクリックイベントと組み合わせるといろいろなことができることがわかりました!
次回は同じくディレクティブのv-model
を使ってユーザーの入力操作による動的なページ変更をやってみたく。ここらへんからようやくJSフレームワークっぽい領域に入っていくのでせうか?それではまた!!
※参考:Vue.jsの習得のためにやったことまとめ
qiita.com