Heim >Web-Frontend >js-Tutorial >So verarbeiten Sie dynamische Daten in der Vue-Loop-Liste (Code)
Der Inhalt dieses Artikels befasst sich mit der Verarbeitungsmethode (Code) dynamischer Daten in der Vue-Schleifenliste. Ich hoffe, dass er für Freunde hilfreich ist.
Aufrufmethode: Vue.set( Ziel, Schlüssel, Wert)
Ziel: die zu ändernde Datenquelle (kann ein Objekt oder Array sein)
Schlüssel: Die spezifischen Daten, die geändert werden sollen
Wert: der neu zugewiesene Wert
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <p v-for="(item,index)in list" :key="item.id" @click="btnClick(index,item.id)"> {{item.message}} </p> </div> <script src="../../dist/vue.min.js"></script> <script> var vm2=new Vue({ el:"#app", data:{ list:[ {message:"星星",id:"1"}, {message:"太阳",id:"2"}, {message:"月亮",id:"3"} ] }, methods:{ btnClick(index,id){ this.$set(this.list,index,{message:"小猫",id:id}); } } }); </script> </body> </html>
Das obige ist der detaillierte Inhalt vonSo verarbeiten Sie dynamische Daten in der Vue-Loop-Liste (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!