Vue.js Eğitimi 02-33

Css Class'ları olmadan dinamik stil işlemleri

by Bilal AFSAR

HTML

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

<div id="app">
  <div class="box" :style="{ backgroundColor : color }"></div>
  <div class="box" :style="{ 'background-color' : color }"></div>
  <div class="box" :style="customStyle"></div>
  <div class="box" :style="[ customStyle, { width:yukseklik + 'px' }]"></div>
  <div class="box" ></div>
  <hr>

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

CSS

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

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    color: "green",
		yukseklik:100
  },
  computed: {
    customStyle: function() {
      return {
        backgroundColor: this.color,
				height:this.yukseklik+"px"
      }
    }
  }
});