当前位置： 移动技术网 > IT编程>网页制作>Html5 > vue处理循环列表动态数据问题

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

2018年09月21日  | 移动技术网IT编程  | 我要评论

调用方法：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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网