Vue3（3）列表渲染与图片切换功能

实现一个点击按钮切换图片的效果

  <div id="app">
    <img :src="src" alt="">
    <button @click=change(0)>1</button>
    <button @click=change(1)>2</button>
    <button @click=change(2)>3</button>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    Vue.createApp({
      data(){
        return {
          src:"./image/1.jpg",
          list: [
            "./image/1.jpg",
            "./image/2.jpg",
            "./image/3.jpg"
          ]
        }
      },
      methods: {
        change(i){
          this.src = this.list[i]
        }
      },
    }).mount("#app")
  </script>

为解决代码重复的问题，优化代码，更简洁的实现这个过程
引入渲染列表的概念

渲染列表

小例子

  <div id="app">
    <button @click="insert">添加</button>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    Vue.createApp({
      data(){
        return {
          list: [
            "香蕉",
            "苹果",
            "鸭梨"
          ]     
        }
      },
      methods: {
        insert(){
          this.list.push("草莓")
        }
      },
    }).mount("#app")
  </script>

通过v-for可以渲染列表，实现代码的优化

看回优化最上边的图片按钮代码

  <div id="app">
    <img :src="src" alt="">
    <button 
      v-for="item,index in list"
      @click=change(index)
    >
      {{index+1}}
    </button>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    Vue.createApp({
      data(){
        return {
          src:"./image/1.jpg",
          list: [
            "./image/1.jpg",
            "./image/2.jpg",
            "./image/3.jpg"
          ]
        }
      },
      methods: {
        change(i){
          this.src = this.list[i]
        }
      },
    }).mount("#app")
  </script>

这样的好处是，会根据数据图片的数量自动生成按钮