Vue.js Eğitimi 02 Ödev 04

by Bilal AFSAR

HTML

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

<div id="exercise">
  <div>
    <button @click="startEffect">Efekti Başlat!</button>
    <div id="effect" :class="effectStyle"></div>
  </div>
  <div :class="['wide', 'purpled']">Artık class'larım var </div>
  <div>
    <input type="text" v-model="enteredClasses">
    <div :class="enteredClasses">Üstteki yazılı class'lar buraya tatbik edildi.</div>
  </div>
  <!-- Alttaki soruda ne istendiğini tam olarak anlayamadım! Bu sebeple ikinci textbox'dan bir değer bağlamadım -->
  <div>
    <input type="text" v-model="conditionalClass1">
    <input type="text">
    <div :class=[conditionalClass1]></div>
  </div>
  <div>
    <input type="text" v-model="styleText">
    <div :style="styleText"></div>
  </div>
  <div>
    <button v-on:click="startProgress">Progress İşlemini Başlat!</button>
    <div :style="{ width: progressWidth + 'px', height: '20px', backgroundColor:'green' }"></div>
  </div>
</div>

CSS

#effect {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.highlight {
  background-color: red;
  width: 200px !important;
}

.shrink {
  background-color: gray;
  width: 50px !important;
}

.wide {
  width: 200px;
}

.purpled {
  color: purple;
  border: 1px solid purple;
  padding: 5px;
}

JavaScript

new Vue({
  el: '#exercise',
  data: {
    effectStyle: "",
    enteredClasses: "",
    conditionalClass1: "",
    styleText: "",
    progressWidth: 0,
  },
  methods: {
    startEffect: function() {
      vm = this;
      setInterval(function() {
        vm.effectStyle = vm.effectStyle == "highlight" ? "shrink" : "highlight";
      }, 500);
    },
    startProgress: function() {
      vm = this;
      if (vm.progressWidth > 0)
        return;

      var i = setInterval(function() {
        if (vm.progressWidth >= 200)
          clearInterval(i);
        vm.progressWidth += 1;
      }, 25);

    }
  },
});