Web前端必做笔记之一：列表渲染与图片切换功能

Web前端必做笔记之一：列表渲染与图片切换功能

<template>
    <div id="app">
         <h1>列表渲染与图片切换功能</h1>
         <img :src="src" alt="">
         <button 
          v-for="(item,index) in list" 
          :key="index" 
          @click="changePic(index)">
             {{index+1}}
         </button>
        
    </div>
</template>

<script>

export default {
      data(){
           return{
               src:'images/1.jpg',
               list:[
                    'images/1.jpg',
                    'images/2.jpg',
                    'images/3.jpg'
               ]
           }
      },
      methods:{
          changePic(i){
               this.src = this.list[i];
          }
      }
}
</script>