走一走案例

 目标：点击按钮 改变li的顺序 第一个会到最后一个

 

  <div id="app">

    <ul>

      <li v-for="(item,index) in list" :key="item.id">{{item.Name}}</li>

    </ul>

    <button @click="A">走一走</button>

  </div>

</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

  const app = new Vue({

    el: '#app',

    data: {

      list: [

        { id: 1, Name: '美女' },

        { id: 2, Name: '程序猿' },

        { id: 3, Name: '帅哥' },

      ]

    },

    methods: {

      A() {

        this.list.push(this.list[0])

        //将数组的第一个元素新增到数组的最后

        this.list.shift() //删除第一个元素

      }

    }

  })

</script>