vue 实现组件中间上一条下一条数据切换

可以使用 props 传递数据，然后在组件内部使用 v-for 循环渲染数据列表，再通过计算属性或者方法获取当前数据的索引，最后在组件中添加上一条和下一条按钮，点击按钮时修改当前数据的索引即可实现切换。具体实现可以参考以下代码：

<template>
<div>
<div>{{ currentData }}</div>
<button @click="prev">上一条</button>
<button @click="next">下一条</button>
</div>
</template>

<script>
export default {
props: {
dataList: {
type: Array,
required: true
}
},
data() {
return {
currentIndex: 0
}
},
computed: {
currentData() {
return this.dataList[this.currentIndex]
}
},
methods: {
prev() {
if (this.currentIndex > 0) {
this.currentIndex--
}
},
next() {
if (this.currentIndex < this.dataList.length - 1) {
this.currentIndex++
}
}
}
}
</script>