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>

 

转载于:https://www.cnblogs.com/hdmm/p/9679982.html

你可能感兴趣的:(vue处理循环列表动态数据问题)