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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM