Vue.js Eğitimi 02-30

Css Class'larıyla Dinamik Stil

by Bilal AFSAR

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <div @click="attachedClass = !attachedClass" :class="{yellow : attachedClass, blue: !attachedClass}" class="box">
  </div>
  <div class="box" :class="{yellow : attachedClass}"></div>
  <div class="box" :class="divClass"></div>
  <hr>

  <input type="text" v-model="color" />

  <div class="box" :class="color"></div>
  <div class="box" :class="[color, {yellow : attachedClass}]"></div>

</div>

CSS

.box {
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin-right: 5px;
}

.yellow {
  background-color: #fbbd08;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    attachedClass: false,
    color: "green",
  },
  computed: {
    divClass: function() {
      return {
        yellow: this.attachedClass,
        blue: !this.attachedClass
      }
    }
  }
});