VueJS Getting Started

Let's get started with VueJS!

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div class="dom" v-for="(_d, _i) in list" :key="_d.id" :style="{ top: _i * 20 + 'px' }">
    <span>{{_d.text}}{{_i}}</span>
  </div>
  <button @click="handle">Toggle</button>
  {{list}}
</div>

CSS

.dom{
  position: absolute;
  transition: all 1s linear;
  opacity:1;
  
}

button{
  margin-top:50px;
}
#app{
  margin-top:50px;
  position:relative;
}

JavaScript

new Vue({
	el: '#app',
  data: {
    show: true,
    list: [
    	{
      	id:1,
        text:'First'
      },
      {
      	id:2,
        text:'Second'
      }
    ]
  },
  methods:{
  	handle: function (){
    	 console.log("DEBUG", this.list)
       let a = JSON.parse(JSON.stringify(this.list[0]));
       let b = JSON.parse(JSON.stringify(this.list[1]))
       this.$set(this.list, 0, b);
       this.$set(this.list, 1, a);
    }
  }
});