【Vue.js】v-bind:classでclassの付け替えとモーダルウィンドウを作ってみる
Vue.jsではv-bind:classで状態によってclassの付け替えができます。
ちなみにVue.jsのv1.0以前は「v-class」というものが使われていましたが、廃止されたようなので注意してください。
今回はこのv-bind:classでclassの付け替えと、それを利用したモーダルウィンドウを作ってみます。
デモサイト
目次
v-bind:classについて
「v-bind:class」と「v-on:click」を使います。
まずはソースコードを
<div id="demo1" class="section"> <button class="btn" v-bind:class="{active: isActive}" v-on:click="isActive=!isActive">button</button> </div>
次はJavaScriptです。
new Vue({ el: '#demo1', data: { isActive: false } })
すごくすっきり書けますね。
「v-bind:class=”{active: isActive}”」で、isActiveがtrueかfalseかで「active」というclassをつけたりはずしたりしています。
JavaScriptでは初期値でflaseにしているので、最初は「active」が付いていない状態。
そして、「v-on:click」でボタンをクリックするたびにisActiveの状態を切り替えています。
v-bind:classで複数指定するとき
v-bind:classはコンマ区切りで複数していできます。
<div class="btn" v-bind:class="{'active': isActive, 'color': ischange}">
注意しないといけないのは複数指定する場合、「”」で囲う必要があるようです。
v-bindを省略
「v-bind」は省略できます。
<button class="btn" :class="{active: isActive}" v-on:click="isActive=!isActive">button</button>
モーダルウィンドウを作ってみる
このclassの付け替えをちょっと応用すれば、モーダルウィンドウを簡単につくれます。
開くようのボタンと、モーダルを閉じるボタン、黒い背景を用意します。
<div id="demo2" class="section"> <button class="btn" v-on:click="isShow=!isShow">modal</button> <div class="modal" v-bind:class="{show: isShow}"> <p>modal</p> <button v-on:click="isShow=!isShow">close</button> </div> <div class="bg" v-bind:class="{show: isShow}" v-on:click="isShow=!isShow"></div> </div>
JavaScriptではこんな感じです。
new Vue({ el: '#demo2', data: { isShow: false } })
さっきとほとんど変わってないですね。
あとはCSSを用意するだけです。
.modal { display: block; box-sizing: border-box; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 3; width: 96%; max-width: 300px; height: 30vh; margin: auto; padding: 30px; border: 1px solid #eee; border-radius: 5px; background-color: #fff; text-align: center; visibility: hidden; opacity: 0; -webkit-transition: .2s; transition: .2s; } .bg { display: block; position: fixed; top: 0; left: 0; z-index: 2; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.6); visibility: hidden; opacity: 0; -webkit-transition: .3s; transition: .3s; } .show { visibility: visible; opacity: 1; }
簡単にモーダルウィンドウが作れました。
参考にしたサイト
Vue.jsガイド
vue.js tips - v-bind:class を使って class の on/off を切り替えよう