Using Arrays for Class Manipulation

Using Arrays for Class Manipulation

by shivkumarganesh

HTML

<div id="app">
  <h3>
  Toggling Classes with Array Syntax
  </h3>
  <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},'textColor','textShadow']">
    <h1>Div with Multiple class Toggle</h1>
  </div>
</div>

CSS

.bgColor {
  background-color: olive;
}
.textColor{
  color:red;
}
.textShadow{
  text-shadow:2px 2px 10px grey;
}
.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: {
    isBorder: false,
    isShadow: false,
    isLayoutCard: false,
    isBorderRounded: false
  }
});