vue处理循环列表动态数据问题

调用方法：Vue.set( target, key, value )

     target：要更改的数据源(可以是对象或者数组)

     key：要更改的具体数据

     value ：重新赋的值

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <div id="app">
10     <p v-for="(item,index)in list" :key="item.id" @click="btnClick(index,item.id)">
11         {{item.message}}
12     </p>
15 </div>
16 
17 <script src="../../dist/vue.min.js"></script>
18 <script>
19     var vm2=new Vue({
20         el:"#app",
21         data:{
22             list:[
23                 {message:"星星",id:"1"},
24                 {message:"太阳",id:"2"},
25                 {message:"月亮",id:"3"}
26             ]
27         },
28         methods:{
29             btnClick(index,id){
30                 this.$set(this.list,index,{message:"小猫",id:id});
31             }
32         }
33     });
34 </script>
35 </body>
36 </html>

 

posted @ 2018-09-20 12:01  海盗的小秘密  阅读(5640)  评论(0)  编辑  收藏  举报