vue+storejs获取数据使用说明

这次给大家带来,的注意事项有哪些,下面就是实战案例,一起来看一下。

具体代码如下所示:

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中直接使用如下:

  • {{list}}

登录后复制

但是如果此时我想对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的数据的双向绑定。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

Vue.js+Flask来构建单页的App(附代码)

需要遍历不规则多维数组时应怎么写JS

以上就是vue+storejs获取数据使用说明的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2764559.html

(0)
上一篇 2025年3月8日 10:32:51
下一篇 2025年2月18日 03:31:10

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • nodejs对密码加密处理方法总结

    这次给大家带来nodejs对密码加密处理方法总结,nodejs对密码加密处理的注意事项有哪些,下面就是实战案例,一起来看一下。 本文实例讲述了nodejs中密码加密处理操作。分享给大家供大家参考,具体如下: 一、关于node加密模块cryp…

    编程技术 2025年3月8日
    200
  • nodejs连接mysql数据库步骤剖析

    这次给大家带来nodejs连接mysql数据库步骤剖析,nodejs连接mysql数据库的mysql数据库有哪些,下面就是实战案例,一起来看一下。 本文实例讲述了nodejs连接mysql数据库及基本知识点。分享给大家供大家参考,具体如下:…

    编程技术 2025年3月8日
    200
  • JS实现缓存算法步骤详解

    这次给大家带来JS实现缓存算法步骤详解,JS实现缓存算法的注意事项有哪些,下面就是实战案例,一起来看一下。 FIFO 最简单的一种缓存算法,设置缓存上限,当达到了缓存上限的时候,按照先进先出的策略进行淘汰,再增加进新的 k-v 。 使用了一…

    编程技术 2025年3月8日
    200
  • 加载移除js与css文件步骤详解

    这次给大家带来加载移除js与css文件步骤详解,加载移除js与css文件步骤详解的注意事项有哪些,下面就是实战案例,一起来看一下。 //动态加载一个js/css文件function loadjscssfile(filename, filet…

    编程技术 2025年3月8日
    200
  • webpack打包压缩js与css步骤详解

    这次给大家带来webpack打包压缩js与css步骤详解,webpack打包压缩js与css的注意事项有哪些,下面就是实战案例,一起来看一下。 打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.opti…

    编程技术 2025年3月8日
    200
  • Vue.js开发mpvue框架步骤详解

    这次给大家带来Vue.js开发mpvue框架步骤详解,Vue.js开发mpvue框架的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 mpvue是一款使用Vue.js开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.…

    2025年3月8日 编程技术
    200
  • JavaScript Switch 语句的实际运用方法

    在开始学习javascript中会经常会遇到javascript,在这里会详细讲解Switch语句实际使用的方法。 语法 switch(n){case 1: 执行代码块 1 break;case 2: 执行代码块 2 break;defau…

    编程技术 2025年3月8日
    200
  • JS模拟实现哈希表及应用详解

    这篇文章主要介绍了js模拟实现哈希表及应用,结合实例形式分析了javascript模拟实现哈希表的步骤、相关操作技巧与使用方法,需要的朋友可以参考下 本文实例讲述了JS模拟实现哈希表及应用。分享给大家供大家参考,具体如下: 在算法中,尤其是…

    2025年3月8日
    200
  • 原生javascript AJAX 三级联动的实现代码

    这篇文章主要介绍了原生javascript ajax 三级联动的实现代码,非常不错代码简单易懂,具有一定的参考借鉴价值,需要的朋友可以参考下 js 三级联动的实现代码如下所示: nbsp;html>    js原生ajax      …

    编程技术 2025年3月8日
    200
  • JS循环遍历JSON数据的方法

    这篇文章主要介绍了关于js循环遍历json数据的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 JSON数据如:{“options”:”[{/”text/”:/…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论