Vue.jsではv-bind:classで状態によってclassの付け替えができます。

ちなみにVue.jsのv1.0以前は「v-class」というものが使われていましたが、廃止されたようなので注意してください。

今回はこのv-bind:classでclassの付け替えと、それを利用したモーダルウィンドウを作ってみます。

デモサイト

目次
  1. v-bind:classについて
  2. モーダルウィンドウを作ってみる

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 を切り替えよう

Tweet
このエントリーをはてなブックマークに追加
Pocket