Vue.js Eğitimi 02 Ödev 03

by Bilal AFSAR

HTML

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

<div id="exercise">
  <div>
    <p>Şuanki Değer: {{ value }}</p>
    <button @click="value+=5">Add 5</button>
    <button @click="value+=1">Add 1</button>
    <p>{{ result }}</p>
  </div>
  <div>
    <input type="text" v-model="secondValue">
    <p>{{ value }}</p>
  </div>
</div>

JavaScript

new Vue({
  el: '#exercise',
  data: {
    value: 0,
    secondValue: ""
  },
  computed: {
    result: function() {
      return this.value !== 33 ? "Henüz bitmedi" : "Tamamlandı";
    }
  },
  watch: {
    result: function(v) {
      if (this.value === 0)
        return;

      vm = this;
      setTimeout(function() {
        vm.value = 0;
      }, !this.secondValue && !isNaN(this.secondValue) ? 5000 : (this.secondValue * 1000));
    }
  }
});