使用列表中单个对象的元素作为 Vue.js 中的 img 源

Question

我有一个对象列表，目前只包含一个 ID 和一个路径：

export let carList = [
    {
        id : ++id,
        path : "img/RedCar.png",
    },
    {
        id : ++id,
        path : "img/BlueCar.png",
    },
    {
        id : ++id,
        path : "img/GreenCar.png",
    },
]

并希望基于可以用按钮递增的索引一次显示它们。到目前为止，我已经设法使用 v-for 将它们全部打印出来，但似乎找不到只打印一个的方法。这是我目前所拥有的：

<template>
<div id="carSelector">
    <img id="left-arrow" src="img/leftarrow.png">
    <img id="carPic" v-for="car in cars" :src="car.path" v-bind:key="car.id" />
    <img id="right-arrow" src="img/rightarrow.png">
</div>
</template>

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

export default {
    name: "carSelector",
    data() {
        return {
            cars: carList
        }
    },
    methods: {
    
    }
}
</script>

Answer 1

您可以使用一个变量来维护当前索引，并添加两个函数来在图像之间切换。我希望这能解决你的问题。


<template>
  <div id="carSelector">
    <img id="left-arrow" src="img/leftarrow.png" @click="previous"/>
    <img id="carPic" :src="cars[selectedIndex].path" />
    <img id="right-arrow" src="img/rightarrow.png" @click="next" />
  </div>
</template>
<script>
import { carList } from "./page-index.js";
export default {
  name: "carSelector",
  data() {
    return {
      selectedIndex: 0,
      cars: carList,
    };
  },
  methods: {
    next() {
      if (this.selectedIndex < this.cars.length) {
        this.selectedIndex++;
      }
    },
    previous() {
      if (this.selectedIndex !== 0) {
        this.selectedIndex--;
      }
    },
  },
};
</script>

使用列表中单个对象的元素作为 Vue.js 中的 img 源

Using element from single object in list as img source in Vue.js

html

javascript

vue.js

v-for