Dieses Mal werde ich Ihnen eine detaillierte Erläuterung der Schritte geben, mit denen Vue von Storejs erhaltene Daten verarbeitet Praktischer Fall, schauen wir uns das gemeinsam an. Der spezifische Code lautet wie folgt:
Drucken Sie es jetzt aus:
export default {
data(){
return {
shopList:{},
isEmpty:false, //判断购物车中是否有存在内容
}
},
created(){
if(!store.get('?shopCar')){
this.isEmpty = true;
}else{
//对数据处理 将商店中名中的地址分离出来
this.shopList = store.get('shopCar');
console.log(this.shopList)
}
}
}Die von this.shopList angezeigten Ergebnisse sind {
ob: Observer}
Obwohl es wie folgt direkt in Vue verwendet werden kann:
<ul>
<li v-for = "list in shopList" :key = "list.id">
{{list}}
</li>
</ul>
this.shopList.length
Es gibt mehrere Möglichkeiten, ein Objekt zu durchlaufen : 1. Die am häufigsten verwendete for-Schleife
, aber derzeit ist die Länge nicht definiert und diese Methode ist nicht verfügbar2. kann aus dem gleichen Grund wie oben nicht verwendet werden
3.jquery
verfügt auch über Methoden zum Durchlaufen von Objekten
Sie finden eine dritte Methode, mit der diese Daten durchlaufen werden können, und dann können die Daten verarbeitet werden. $.each(this.shopList,function(n,i){})
Eine einfachere und direktere Möglichkeit besteht darin, die Daten zunächst einer Variablen zuzuweisen, die Daten in das gewünschte Format zu verarbeiten und sie dann nach this.shopList zu kopieren.
created(){
if(!store.get('?shopCar')){
this.isEmpty = true;
}else{
//对数据处理 将商店中名中的地址分离出来
var shopList = store.get('shopCar')
$.each(shopList,function(n,i){
//处理数据。。。。。
})
this.shopList = shopList;
console.log(this.shopList)
}
}Was sind die Gründe, warum die Verwendung von V-Show in VueJS nicht funktioniert?
Vue-berechnete Eigenschaften Ausführliche Erklärung
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte für vue zur Verarbeitung der von storejs erhaltenen Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
