這次帶給大家,的注意事項有哪些,下面就是實戰案例,一起來看一下。
具體程式碼如下:
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) } } }
這個時候印出來:
this.shopList 顯示的結果為{ob: Observer}
雖然可以在vue中直接使用如下:
<ul> <li v-for = "list in shopList" :key = "list.id"> {{list}} </li> </ul>
但是如果此時我想對this.shopList中的數據進行處理,就會出現問題,此時如果你想遍歷循環該數據,就會出現意想不到的效果,因為此時列印this.shopList.length
顯示出來的結果為undefined。
遍歷物件有幾種方法:
#1,最常用的for迴圈 ,但此時length為undefined,此方法不可用;
2,for in 同上原因不可使用
3. jquery中也有遍歷物件的方法$.each(this.shopList,function(n,i){})
你會發先第三種可以遍歷這個數據,那麼就可以實現數據的處理了。
但如果你的this.shopList這個物件中又包含了一層物件呢? .each()中再包含一層.each()中再包含一層.each(),不就可以解決這種問題了嗎?除了這個方法外,有種更好的方法:
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) } }
更簡單直接的辦法是,將資料先賦值給一個變量,將資料處理為你想要的格式之後,再複製給this .shopList即可。
為什麼我們直接將資料賦值給this.shopList就不可以對資料進行處理了呢?
原因是當你將資料賦值給this.shopList,也就是實作了vue的資料的雙向綁定。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是vue+storejs取得資料使用說明的詳細內容。更多資訊請關注PHP中文網其他相關文章!