Vue

by saitam

HTML

<div id="app">
  <button @click="testPush">PUSH</button>
  <button @click="testUnshift">UNSHIFT</button>
  <button @click="testSplice">SLICE TO INDEX -1</button>
  
  <table>
    <tr>
      <th>index</th>
      <th>Value</th>
      <th>Name</th>
      <th>Sex</th>
    </tr>
    <tbody is="transition-group" name="fade">
      <tr 
          v-for="(item, index) in items"
          :key="item.val"
          >
        <td>{{ index }}</td>
        <td>{{ item.val }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.sex }}</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.fade-enter-active, .fade-leave-active {
  background-color: none;
  transition: all 2s;
}

.fade-enter, .fade-leave-to {
  background-color: green;
}

Vue

new Vue({
  el: "#app",
  data: {
  	itemIndex: 0,
  	items: [
    	{"val": 1, "name": "John", "sex": "male"},
    	{"val": 2, "name": "Maria", "sex": "female"},
    	{"val": 3, "name": "Arnold", "sex": "male"},
    ]

  },
  methods: {
    testPush() { 
      this.items.push({"val": 456, "name": "Peter", "sex": "male"})
    },
    testUnshift() { 
      this.items.unshift({"val": Math.random(), "name": "Peter", "sex": "male"})
    },
    testSplice() {
      this.itemIndex--;
      this.items.splice(this.itemIndex, 0,
        {"val": Math.random(), "name": "Peter", "sex": "male"}
      );
    }
  }
})