Class Toggle Based on Single and Multiple Values

Class Toggle Based on Single and Multiple Values

by shivkumarganesh

HTML

<div id="app">
  <h3>
  Toggling Classes As required
  </h3>
  <input type="checkbox" id="checkbox" v-model="isBgColor">Background Color:{{isBgColor}}

  <hr>
  <br>
  <div class="dimensions" v-bind:class="{bgColor:isBgColor}">
    <h1>This is the Div single class toggle</h1>
  </div>

  <hr>
  <br>
  <input type="checkbox" id="checkbox" v-model="isBorder">Border:{{isBorder}}
  <input type="checkbox" id="checkbox" v-model="isShadow">Shadow:{{isShadow}}
  <input type="checkbox" id="checkbox" v-model="isBorderRounded">Rounded Border:{{isBorderRounded}}
  <div class="dimensions" v-bind:class="{ 'border':isBorder,'shadow':isShadow,'rounded':isBorderRounded}">
    <h1>Div with Multiple class Toggle</h1>
  </div>
</div>

CSS

.bgColor {
  background-color: olive;
}

.border {
  border: 1px solid red;
}

.shadow {
  box-shadow: 0px 14px 10px lightgrey;
}

.rounded {
  border-radius: 20%;
}

.dimensions {
  height: 90px;
  line-height: 90px;
  text-align: center;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    isBgColor: false,
    isBorder: false,
    isShadow: false,
    isLayoutCard: false,
    isBorderRounded: false
  }
});