目标:点击按钮 改变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>