JSFiddle - React, Tailwind, and code Playground

by jaycethanks

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="flip-list-demo" class="demo">
  <transition-group name="flip-list" tag="p">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
      <button v-on:click="calling(item)">置顶</button>
      <button v-show="items.indexOf(item)==0">完成</button>
    </li>
  </transition-group>
</div>

CSS

.flip-list-move {
  transition: transform .5s;
}

Vue

new Vue({
  el: '#flip-list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    },
    calling:function (item) {
    	let middleValue = item;
      this.items.splice(this.items.indexOf(item),1);
      this.items.unshift(middleValue);
     
  
    
    
    }
  }
})