Vue

by FrOnDaL

HTML

<div id="app">



  <h4>Şuanki Değer : {{ value }}</h4><br>
  <button @click="value++">Arttır</button>
  <button @click="value--">Azalt</button><br><br>
  <p>Değerler : {{ result() }}</p><br>
  
<input type="text" v-on:keyup.enter="verial" placeholder="Değer girin ve enter basın">  <label> Varsayılan değer : {{ degeral }}</label><br><br>
  <p>{{ value }}</p><br><br>
  
  <div @click="boolen = !boolen" :class="{ yellow : boolen, blue : !boolen} " class="box"></div>
  <div class="box"></div>
  <div class="box" :class="color"></div>
  <hr>
  <input type="text" v-model="color">
  

  
   
</div>

CSS

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

.yellow{
  background-color : yellow;
  
}

.blue{
  background-color : blue;
  
}

.green{
  background-color : green;
  
}

Vue

new Vue({
	el : "#app",
  data : {
  	value : 0,
    degeral : 5000,
    boolen : true,
    color : "green"
  },
  methods : {
  	result : function(){
    	return this.value == 5 ? "Tamamlandu." : "Haızrlık bitmedi.";
    },
   verial : function(veriler){
    	this.degeral = veriler.target.value;
    }
  },
  watch : {
  	value : function(){
    	dis = this;
      setTimeout(function(){
      	dis.value = 0;
      }, dis.degeral);
    }
  }
  
});