用vue实现走一走

1、引入vue

 <!-- 1、引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

2、准备dom

<!-- 2、准备dom -->
    <div id="app">
    <ul>
        <li v-for="(item,index) in arr" >{{item.value}}</li>
    </ul>
    <button @click="fn">{{name}}</button>
   </div>

3、创建vue

 <script>
        // 3、创建vue
        new Vue({
            el: '#app',
            data: {
                name:'走一走',
                arr: [
                    { id: 1, value: '帅哥' },
                    { id: 2, value: '美女' },
                    { id: 3, value: '程序猿'},
                ]
            },
            methods:{
                 fn(){
                    this.arr.push(this.arr[length])
                 
                     this.arr.shift()
                    //  this.arr.push(item)
                    console.log(this.arr[length])
                 }
            }
        })

    </script>

效果：