Challenge 4 - Course Vue.js

by Yure Pereira

HTML

<div id="app">

  <h2>1#</h2>
  <div>
    <button @click="startEffect">Iniciar efeito</button>
    <div id="efeito" :class="{destaque: destaque, escolher: escolher}"></div>
  </div>

  <h2>2#</h2>
  <div :class="['ex2-color', 'ex2-size']">Estou sem classe CSS :(</div>
  
  <h2>3#</h2>
  <input type="text" v-model="inputClass">
  <div :class="inputClass"></div>
  
  <h2>4#</h2>
  <input type="text" v-model="inputClass">
  <input type="text" v-model="inputClass">
  <div :class="inputClass"></div>
  
</div>

CSS

#app {
  
}

#efeito {
  width: 100px;
  height: 100px;
  -webkit-transition: width 2s;
  transition: width 2s;
}

.destaque {
  background: #ff2929;
  width: 150px !important;
  height: 100px;
}
.escolher {
  background: #00cb4a;
  width: 100px;
  height: 150px !important;
}

.ex2-color {
  background: #ff2929;
}
.ex2-size {
  width: 100%;
  height: 100px;
}

.class1 {
  width: 100px;
  height: 100px;
}
.class2 {
  background: #ff2929;
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	destaque: true,
    escolher: false,
    inputClass: '',
    inputClass2: '',
  },
  methods: {
  	startEffect: function() {
    
    	var _this = this;
    
    	setInterval(function() {
      	
        	if (_this.destaque) {
          
          	_this.destaque = false;
            _this.escolher = true;
          
          } else {
          
            _this.destaque = true;
            _this.escolher = false;
          
          }
        
      }, 1000);
    
    }
  }
});