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

最新推荐文章于 2025-04-30 19:22:01 发布

原创最新推荐文章于 2025-04-30 19:22:01 发布 · 240 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

本文是Web前端开发的笔记，重点讲解Vue框架下如何实现列表数据的动态渲染以及图片切换功能，适合前端初学者和进阶者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>