[Vue案例]01.实现“点击按钮，图片切换”的两种方式

记录两种实现图片切换的vue demo。一种带v-for 一种不带。都是写在单组件文件中的。

1.不带v-for的版本

<template>
  <div>
    <h1>v-for实现图片切换,一个图片位,三个按钮,点哪个是哪个</h1>
    <img :src="imgSrc[index]" />
    <ul>
      <li v-for="(v, i) of imgSrc" :key="i">
        <button @click="changeImg(i)">{{ i + 1 }}</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 0,
      imgSrc: [
        require("/statics/1.png"),
        require("/statics/2.png"),
        require("/statics/3.png"),
      ],
    };
  },
  methods: {
    changeImg(i) {
      this.index = i;
    },
  },
};
</script>

2.带v-for的版本。v-for循环的对象是按钮而不是图片

<template>
  <div>
    <h1>v-for实现图片切换,一个图片位,三个按钮,点哪个是哪个</h1>
    <img :src="imgSrc[index]" />
    <ul>
      <li v-for="(v, i) of imgSrc" :key="i">
        <button @click="changeImg(i)">{{ i + 1 }}</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 0,
      imgSrc: [
        require("/statics/1.png"),
        require("/statics/2.png"),
        require("/statics/3.png"),
      ],
    };
  },
  methods: {
    changeImg(i) {
      this.index = i;
    },
  },
};
</script>