怎么用vue.js 在前端嵌套遍历这样的数据,可以像京东那样在首页显示商品层级分类的

[
{
"id": 1,
"name": "图书、音像、电子书刊",
"parentId": 0,
"isParent": true,
"sort": 1,
"node": [
{
"id": 2,
"name": "电子书刊",
"parentId": 1,
"isParent": true,
"sort": 1,
"node": [
{
"id": 3,
"name": "电子书",
"parentId": 2,
"isParent": false,
"sort": 1,
"node": null
},
{
"id": 4,
"name": "网络原创",
"parentId": 2,
"isParent": false,
"sort": 2,
"node": null
},
{
"id": 5,
"name": "数字杂志",
"parentId": 2,
"isParent": false,
"sort": 3,
"node": null
},
{
"id": 6,
"name": "多媒体图书",
"parentId": 2,
"isParent": false,
"sort": 4,
"node": null
}
]
},
{
"id": 7,
"name": "音像",
"parentId": 1,
"isParent": true,
"sort": 2,
"node": [
{
"id": 8,
"name": "音乐",
"parentId": 7,
"isParent": false,
"sort": 1,
"node": null
},
{
"id": 9,
"name": "影视",
"parentId": 7,
"isParent": false,
"sort": 2,
"node": null
},
{
"id": 10,
"name": "教育音像",
"parentId": 7,
"isParent": false,
"sort": 3,
"node": null
}
]
},
{
"id": 11,
"name": "英文原版",
"parentId": 1,
"isParent": true,
"sort": 3,
"node": [
{
"id": 12,
"name": "少儿",
"parentId": 11,
"isParent": false,
"sort": 1,
"node": null
},
{
"id": 13,
"name": "商务投资",
"parentId": 11,
"isParent": false,
"sort": 2,
"node": null
},
{
"id": 14,
"name": "英语学习与考试",
"parentId": 11,
"isParent": false,
"sort": 3,
"node": null
},
{
"id": 15,
"name": "文学",
"parentId": 11,
"isParent": false,
"sort": 4,
"node": null
},
{
"id": 16,
"name": "传记",
"parentId": 11,
"isParent": false,
"sort": 5,
"node": null
},
{
"id": 17,
"name": "励志",
"parentId": 11,
"isParent": false,
"sort": 6,
"node": null
}
]
},

0

2个回答

0

你问题描述的不清楚,想弄成什么样,截个图来好吧

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
使用VUE构建商品界面
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webpack App</title> <link rel="stylesheet" type="text/c
Java实现仿京东/淘宝首页商品分类的展示!
需求:         网站首页 - 商品分类展示( 使用缓存 - 提高效率 - 提高用户满意度 ) 1.实现效果如下: (京东-首页分类) 一、需求分析 1.表关系如下: ( 自关联表 - tb_item_cat ) parent_id:       &
html+angularjs+redis获取后台数据模拟京东/天猫的商品分类导航
文章中一些详细的说明,会在代码中用注释的方式解释,如果有疑问或者写的不好的地方可以留言交流 先上效果图(文末会附上源码):  目录 一 数据库表结构 二 实体类设计  三 后端代码 3.1 数据访问层 3.2 redis属性文件 3.3 redis配置文件 3.4 接口层 3.5 服务层 3.6 控制层 四 前端代码 4.1 indexService.js文件 4....
vue商品分类,实现购物车功能
new Vue({ el: "#app", data: { cIndex: 0, lists: [ { title: "推荐商品", goods: [ { id: 0, ...
京东三级列表页持续架构优化
本文作者,王向维,京东商城三级列表页架构师。工作期间,完成了京东三级列表页由Node.js版本到Nginx+Lua版本的变迁,并针对三级列表页前端即服务器端做了大量的优化工作。 京东三级列表页 三级列表页是什么 列表页是京东商城的三大核心系统之一。京东三级列表页是用户选取商品类型后,展示同类商品的页面,具体如下图所示。 如何进入三级列表页 用户在首页左侧的导航树中(如
仿京东商城商品分类搜索功能
仿京东商城商品分类搜索功能
Python对商品属性进行二次分类并输出多层嵌套字典
用python预测二次分类的商品属于一级标签的概率,存储为字典,排序后输出来。说的有点绕,举个例子,用户搜索“snidle”,我们可以预测出它属于“女装”“女鞋”“食品”等n个一级分类的概率,这样可以锁定搜索范围。
ThinkPHP商城分类无限分类遍历数据
今天需要给安卓IOS端写商城分类的接口,使用原始的方法也是可以的,但是之前使用过得方法忘记怎么写了,最后想起了这个属于无限分类方面的,也属于递归操作,所以到网上查了查,最后找到了相关的方法,特此记录一下,链接如下: https://blog.csdn.net/landylxy/article/details/55259665 具体代码如下: /** *方法一 * */ func...
使用Recyclerview实现仿京东分类
主布局 ​​​​ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height=...
京东商城用来展示产品代码
/*jqueryzoom&&jcarousel*/(function($){$.fn.jqueryzoom=function(options){var settings={xzoom:200,yzoom:200,offset:10,position:"right",lens:1,preload:1};if(options){$.extend(settings,options);}v...
Html+Css新手简单快速仿京东商品分类导航
看一看最终的效果: 下面我们就按照分析→设计→实现 三大步骤来完成这个导航的效果,学会了之后,会发现大多数电商都是用这样的效果的。我们先从把结构写好:一个nav包含上面一个div(全部商品分类),一个导航列表(ul li) 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位,这个div分成左边:小分类列表,右边图片广告) 因为我是用 纯css+html写的, 所以它的文件有
jquery仿京东导航,仿淘宝商城左侧分类导航菜单,jquery实现下拉菜单效果
在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局。京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下:   baidu        baidu
仿京东分类联动列表
前段时间,项目需求需要做一个类似京东的这种分类,后来花时间做了,然并卵,每过两天需求变了*&%#$@^^%6*&*67.....但既然做了就记下来吧....
获取商品分类信息 后端像前端传递json数据
dao代码 public List<Category> finallCategory() throws Exception { QueryRunner qr=new QueryRunner(JDBCUtils.getDataSource()); List<Category> list = qr.query("select * from category ",ne...
仿京东移动端分类页面的布局及css设置
项目中用到的分类界面要的效果类似于京东移动端的分类页面:(两侧都可滑动且互不影响)放弃了,代码到这上面又变的奇怪了不少,直接到csdn上看吧!地址是:http://blog.csdn.net/zuoyiran520081/article/details/53811671 效果如图: html代码如下: 柴米油盐 柴米油盐1 柴米油盐2 柴...
纯css仿淘宝京东导航菜单栏
css仿淘宝京东导航栏   *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{line-height:2em;background-color:#ffffff;font-family:arial, helvetica, sans-serif;color:#666666;font-size:12px} a{
基于React Native构建的仿京东客户端(五)如何实现首页 分类 发现 购物车 我的 Tab导航页面
新建4个用红色方框标识的文件,如下图所示: myths-Mac:JdApp myth$ yarn add react-native-tab-navigator CartPage.js文件完整的代码如下: import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'reac...
Vue-demo(一)实现商品列表的展示
Vue实现商品列表的展示是一个比较简单的入门demo,下面是具体的实现: 简单CSS样式: <style> #box ul{ display: flex; flex-wrap: wrap; } #box li{ padding: 3px; list-style: none; margin-right: 15px; border: 1px solid ...
仿京东商品分类显示
仿京东首页商品的分类显示,联动显示商品的分类,点击。
Android 仿京东、拼多多商品分类页的示例代码
最近接了一个项目,要仿照京东写一个商品分类页,但需要滑动右边子分类,左边的主分类也跟着变换,写了个demo,需要的同学可以自取。 先放一个写完之后的样子: 写这个需求的思路也很清晰,首先左边肯定是一个listView,右边也是一个listView,这两个listView要达到一个联动的效果。右边的listView再嵌套一个GridView即可。如下图所示。 所以,我们需要的数据结构也...
ecshop小京东首页分类楼层左侧广告修改方法
用了以ecshop为内核的小京东5.0,在设置首页楼层分类的时候,是不是发现这样一个怪象:在后台模板设置里修改了楼层的分类后发现这个楼层左侧的广告不见了!代而显示的是一张“暂无广告”的图片!这是怎么回事?修改后台对应楼层的广告图片也没有任何反应!经过网上搜索相关的问题,也没有发祥有效的解决方法(还发现了同样遇到这个问题的朋友发的问题帖子)。怎么办,只有靠自己了! 经过分析首页楼层左侧广告调用
仿京东商城(部分功能)前端+后台
仿京东商城部分功能,从注册登录,首页展示,搜索框,到页面的详情,加入购物车,将购物车存储到redis中。后台使用Spring+SpringMVC+MyBatis+Redis实现。对初学者是一个非常好的联系项目,不大也不小,而且先后台都有涉及。
使用Recyclerview实现仿京东分类 + MVP
今天我们一起探讨一下通过RecyclerView实现二级联动,在这里我做的是仿京东的分类页面,京东的分类页面是一个非常经典的项目,今天我们就来写一下. GitHub源码地址:https://github.com/BnerFang/Day_1219首先,第一步:搭建环境(依赖和权限) 在这里首先看一下所需依赖:在这里图片的记载我使用的是Glide   //圆角依赖 implementat...
仿京东分类实现
这篇主要就是一个仿京东分类的一篇,虽然代码比较多,认真看吧
高仿各大商城首页---使用分类型的RecyclerView来实现
一入商城深似海~ 商城类的App,确实是有许多东西值得学习,但是只要略微斟酌一下,你又会发现,它们之间存在着许多不谋而合的相似,也就是所谓的雷同~既然如此,让我们也来接下地气,先从一个简单的首页做起吧~ 实现的效果如下图: 准备: ①build.gradle文件需要添加的依赖: compile 'com.jakewharton:butterknife:7.0.
模仿京东商城首页多级导航菜单
京东商城导航菜单 *{ padding: 0; margin:0; font-family: "microsoft yahei"; font-size: 14px; } .nav{ border: 2px solid rgb(177,25,26); display: block; width: 210px; text-indent: 2em; m
显示商品分类列表页面
1.wxml页面代码:<!-- 所有分类显示 --> <view class="btn-sudoku"> <navigator url="../listdetail/listdetail" class="nav-item"> <image src="../../images/type/subnav_01.png&quot
java三大框架实现仿京东分页效果
Java三大框架实现仿京东分页效果实现,直接把代码复制到项目中即可使用,注意jsp中用了bootstrap框架,
web商城项目笔记-2.商品分类信息和商品信息展示
商品分类信息和商品信息展示相关 1.商品分类信息展示 2.首页商品展示 3.单个商品展示 4.某个分类下 商品展示 1.商品分类信息展示: 1.前端: 1.使用封装ajax发送请求,无需参数 2.返回数据vo的.data属性获取分类对象 3.遍历对象 4.他本身中的cname属性为分类名字 5.拼接字符串,把拼接好的标签追加到div后 2.后端: 1.浏览器没有参数获取,直接调用se...
v-for循环遍历:vue-商品列表查询数据分类显示,json数据格式的解析
以饿了么来举例吧,我们要显示下图画线框里面的食物信息,数据是遍历json数据出来的, json数据在呢?结构是酱紫的数组里面放了多个对象。对象里面放了数组的同时又放了若干对象,我们要实现上图的效果(将套餐类,特色鸡公煲套餐分类显示),就要把foods这个数组里面的name,description,tips显示出来 怎么做呢? 首先要用v-for得到goods.json里的每个对象,把...
京东和亚马逊商品页面的爬取
京东商品页面的爬取 和亚马逊商品页面的爬取
jquery仿京东商城新版左侧分类导航
jquery仿京东商城新版左侧分类导航
关于Ecshop小京东,手机管理后台,增加楼层右边分类不显示的问题
找到网站域名/mobile/后台目录/template/template_setup.htm ,如下图进行修改 cell.innerHTML = '' +'';将上述代码注释改为 cell.innerHTML = '' + selectPlease + '' + selCategories + '';
首页商品分类展示——淘淘商城(十四)
需求 分析 总结 Service层 Controller层 需求 分析 前端通过jsonp跨域调用服务层的服务,获得包含商品分类信息,并使用回到函数显示分类信息。注意,该出直接使用 $.getJSONP,写法不同于https://blog.csdn.net/qq_40369829/article/details/79667682 显示商品类目: 总结 ...
ecshop 首页显示每个分类的产品列表
//add by yanggg 旺旺 致雅家装 $goods_list_str = ''; foreach($cat_list_row as $cat_row){ $children = get_children($cat_row['cat_id']); $cat_goods_list_row = get_category_recommend_goods('best', $ch
tp5 中如何让 公共侧边栏 遍历显示为数据库数据
第一步 把公共侧边栏放在public目录下,和公共footer.html 同一种方式引入到html页面中 第二步 建立公共类,让使用侧边栏的类继承这个公共类,就可以把数据显示在侧边栏中 具体步骤 在application /index/controller 下建立 Commen.php 公共类 namespace app\index\controller; use think\Controlle...
JS-仿京东导航(JS版)
效果描述:相比前面的CSS版本,此版本做了很多优化和其他效果,比如文字悬浮和图片悬浮 具体代码如下: 分类导航一级菜单制作(JS版) body{ padding:0; font-size: 10px; } .topmenu{
android 实现仿美团点菜和京东分类导航
android 实现仿美团点菜和京东分类导航  欢迎大家进群:574605026   开启我们的开发之旅    废话不多说,看图说话 当看到标题的时候,每个人都想知道,到底是个什么样子呢?会不会和我想的不一样呢,我会不会有上当呢,看到图之后大家就知道,是实现的一个什么功能了。 一、首先给大家讲解下实现的方式,其实不是很难。 我先给大家看个我画的草图,画的不好
ecshop首页增加商品楼层
在管理ecshop商城的过程中,有时会增加一个商品分类并把这个商品分类在首页楼层中展示。如果所有的楼层都用完了,那么就需要通过修改程序代码来增加一个楼层。1.在商城网站源文件根目录中找到themes里的index.dwt和根目录的includes中的lib_goods.php并打开,  在index.dwt里找到其中一个楼层,这些楼层他们在模板都没有显示的,都是用这个引入到模板中显示的  <...
Jquery仿京东分类导航层简单实现
$(function () { var alink01 = $(".item > ul"); alink01.hover(function () { //alert div var divId = $(this).find("div").attr("id");
文章热词 像质量评价标准 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 这样学习java 消消乐这样的游戏开发价格