Vue基础篇（三）之列表渲染（删除、更新、遍历）

最新推荐文章于 2025-06-21 21:10:32 发布

原创最新推荐文章于 2025-06-21 21:10:32 发布 · 置顶 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #列表渲染

Vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

Vue学习

9 篇文章

订阅专栏

本文深入讲解Vue.js中列表的遍历、删除与更新操作，通过实例代码演示如何使用v-for指令进行数组遍历，并展示如何通过Vue提供的方法轻松实现列表项的删除和更新，适合初学者和开发者快速掌握Vue列表操作技巧。

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

Vue基础篇（三）之列表渲染（删除、更新、遍历）

遍历数组

首先说的列表中最常见的遍历数组，在Vue中遍历数组时很方便的，使用v-for就可以实现，下面通过代码来说明

更直观一点。

<ul>

<li v-for="(item,index) in arrays" :key="index" >
  {{item.name}}+{{item.age}}
</li>
 
</ul>
  //v-for里面的意思表示通过index(下标)遍历arrays数组赋给item,key表示唯一的标识符,确定每一个节点的身份，index表示下标。
<script>
  new Vue({
     el:"#test",
     data:{
        arrays:[   //定义一个数组
            
             {name:'xx',age:18},
             {name:'yy',age:20}
            ]
 }
})
</script>

删除列表

删除一行列表，一般我们思维都是直接删除相对应的下标来实现，Vue中同样是这种方式，但是相对来说简便了很多。

<ul>

  <li v-for="(item,index) in arrays" :key="index">
    {{item.name}}+{{item.age}} 
 </li>
<button @click="dele(index)" >删除</button>//定义删除方法
</ul>

<srcipt>

  new Vue(){
       el:"#test",
        data:{
          arrays:[
             {name:'xx',age:18}.
             {name:'yy',age:20}
         
              ]   
          
       },
  methods:{
        dele(index){
           //删除arrays中指定index的内容，这里的splice不与js的相同，是Vue封装过的方法，可以自行去官网查看。
           this.arrays.splice(index,1)//'1' 代表删除一个
            
            }
  
   }
 
}

</srcipt>

更新列表

<ul>
  <li v-for="(item,index) in arrays" :key="index">
    {{item.name}}+{{item.age}} 
 </li>
<button @click="updat(index,{name:'xy',age:25})" >更新</button>//定义更新方法，传值这里没有input，所以就直接自定义，如果是通过输入的，就直接把值传到这里就可以了.

</ul>

<srcipt>

  new Vue(){
       el:"#test",
        data:{
          arrays:[
             {name:'xx',age:18}.
             {name:'yy',age:20}
         
              ]   
          
       },
  methods:{
        updat(index,newP){
           //实质上就是替换了原来的值，Vue重写的splice可以实现增删改三个功能
           this.arrays.splice(index,1,newP)//'1' 代表删除一个
            
            }
  
   }
 
}

</srcipt>