Vue

by vucko

HTML

<div id="app">
  <div class="modal-parnet">
  
    <div class="step-1" v-if="steps[0].active">1</div>
    
    <div class="step-2" v-if="steps[1].active">2</div>
    
    <div class="step-3" v-if="steps[2].active">3</div>
    
    <div class="step-4" v-if="steps[3].active">4</div>
    
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
		currentStep: 2,
    steps: [
    	{ id: 1, title: 'jedan', active: false },
    	{ id: 2, title: 'dav', active: false },
    	{ id: 3, title: 'tri', active: false },
    	{ id: 4, title: 'cet', active: false },
    	{ id: 5, title: 'pet', active: false }
    ]
  },
  methods: {

  },
  mounted() {
  	if(this.$route.params.step) this.currentStep = this.$route.params.step
    
  	this.steps[this.currentStep - 1].active = true
  }
})