手把手教你VUE从入门到放弃—— 篇十二（vue中的列表渲染，集合的遍历及增删改）

本文链接：https://blog.youkuaiyun.com/JavaCoder_juejue/article/details/103306057

本文详细介绍Vue.js中如何遍历、删除、修改和新增集合数据，包括v-for指令的使用及响应式更新机制。

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

集合的遍历:

使用v-for = 'item of itemList' 或者 v-for = 'item in itemList'

当想要获取下标时使用 v-for = '(item,index) of itemList' 或者 v-for = '(item,index) in itemList'

测试源码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的列表渲染</title>
    <script src="vue.js"></script>

   <style type="text/css">
           .class111{
               color:red;
           }
   </style>

</head>
<body>
<div id = 'app2'>
       
       <div v-for="(item,index) of userList" key = "item.index">
           {{item.id}} -- {{item.text}} -- {{index}}
       </div>
   </div>
   <script>
       var app = new Vue({
           el:'#app2',
           data:{
               userList:[
                   {id:11,text:"aaa"},
                   {id:22,text:"bbb"},
                   {id:33,text:"ccc"},
                   {id:44,text:"ddd"}
               ]
               },
       methods:{
       }
       });
   </script>
</body>
</html>

集合的删除

当想要删除某一项时

使用 item.List.splice(index,amout);

测试源码如下，效果为点哪删哪

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的列表渲染</title>
    <script src="vue.js"></script>

   <style type="text/css">
           .class111{
               color:red;
           }
   </style>

</head>
<body>
<div id = 'app2'>
       
       <div v-for="(item,index) of userList" @click="deleThis(index)">
           {{item.id}} -- {{item.text}} -- {{index}}
       </div>
   </div>
   <script>
       var app = new Vue({
           el:'#app2',
           data:{
               userList:[
                   {id:11,text:"aaa"},
                   {id:22,text:"bbb"},
                   {id:33,text:"ccc"},
                   {id:44,text:"ddd"}
               ]
               },
       methods:{
           deleThis:function(index){
                   this.userList.splice(index,1);
           }
       }
       });
   </script>
</body>
</html>