Vue.js中如何使用列表内单个对象的元素作为img标签src资源并切换展示

你不需要用v-for渲染全部图片，只需要维护一个当前展示索引，通过箭头点击修改索引即可，修改后完整代码如下：

<template>
<div id="carSelector">
    <img id="left-arrow" src="img/leftarrow.png" @click="prevCar">
    <img id="carPic" :src="cars[currentIndex].path" :key="cars[currentIndex].id" />
    <img id="right-arrow" src="img/rightarrow.png" @click="nextCar">
</div>
</template>

<script>
import {carList} from './page-index.js'

export default {
    name: "carSelector",
    data() {
        return {
            cars: carList,
            // 新增当前展示索引，初始默认展示第一张
            currentIndex: 0
        }
    },
    methods: {
        // 切上一张
        prevCar() {
            this.currentIndex--
            // 边界处理：到第一张后切到最后一张，实现循环
            if (this.currentIndex < 0) {
                this.currentIndex = this.cars.length - 1
            }
        },
        // 切下一张
        nextCar() {
            this.currentIndex++
            // 边界处理：到最后一张后切回第一张
            if (this.currentIndex >= this.cars.length) {
                this.currentIndex = 0
            }
        }
    }
}
</script>

逻辑说明 #

• 仅渲染单张图片DOM，相比v-for渲染全部再隐藏的方案性能更好
• 边界逻辑可根据需求调整，如果不需要循环切换，可在到达边界时禁用对应箭头的点击事件即可
• 如果carList存在为空的场景，可以加个v-if判断cars.length > 0再渲染图片，避免下标取值报错

内容的提问来源于stack exchange，提问作者VapidGoose