html如何实现多级列表,【Vue】vue递归组件实现多级列表
【Vue】vue递归组件实现多级列表
信息的分类展示列表
这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类，如下如所示：
看到这个很多人会想到这个实现起来很简单啊，来个嵌套循环不就完事了。
对，你说的没错，事实就是这样简单。那么就先来看看这么简单的列表怎么实现的，然后这个方案的劣势在哪里。
首先看看我们的数据格式
list: [{
name: "经济",
children: [{
name: "如家"
}, {
name: "7天"
}]
}, {
name: "舒适",
children: [{
name: "智选假日"
}, {
name: "全季"
}]
}]
基于上面的数据格式，我们的实现方式如下：
div class="list-item" v-for="(item, index) in list" :key="index"
div class="item-name"
span{{item.name}}/span
/div
div v-if="item.children" class="children-item"
div v-for="(child, index) in item.children" :key="index"
div class="item-name"
span{{child.name}}/span
/div
/div
/div
/div
看上去非常完美，我们的列表也非常好的展现出来，大功告成。
可是突然有一天咱们的产品突然跑过来说，我们的数据现在多加了一级分类，现在变成这样子了。
list: [{
name: "经济",
children: [{
name: "如家",
children: [{
name: "长江路-如家"
}, {
name: "望江路-如家"
}]
}, {
name: "7天",
children: [{
name: "长江路-7天"
}, {
name: "望江路-7天"
}]
}]
}]
好吧，既然产品有需求数据有变化，那么我们就改代码吧，于是我们在原有的代码上继续加上一层嵌套循环，这次又总算完成了，但是可能没过两天我们的数据又增加了一级分类怎么办还是继续嵌套下去
有些同学可能就会觉得了，哪有这么多层级的数据展示，肯定不会存在的，那只能说我们太年轻，我们不排除这种存在的可能，那如果我们遇到这种情况怎么办这里就要用到我们说的递归组件了，无论你的数据怎么增加我们都不用改动我们的代码。
递归组件
什么是递归组件简单来说就是在组件中内使用组件本身，下面我们就来看看如何在项目中使用递归组件去解决我们上面问题。
首先我们先创建一个 List 的递归组件
template
div
div class="list-item" v-for="(item, index) in list" :key="index"
div class="item-name"
span{{item.name}}/span
/div
div v-if="item.children" class="children-item"
list :list="item.children"/list
/div
/div
/div
/template
script
export default {
name: "List",
props: {
list: Array
}
};
/script
注意上面的代码中我们使用了 List 组件本身，完成这些之后，我们在外部父级组件中使用 List 组件时，不管我们的数据有多少层嵌套关系，都可以完美的自适应加载，我们再也不用通过嵌套嵌套再嵌套了。
template
div class="list-detail"
list :list="list"/list
/div
/template
script
import List from "./components/List";
export default {
name: "Parent",
components: { List },
data() {
return {
list: [{
name: "经济",
children: [{
name: "如家",
children: [{
name: "上江路-如家"
},
{
name: "望江路-如家"
}]
},{
name: "7天",
children: [{
name: "长江路-7天"
},
{
name: "望江路-7天"
}]
}]
}]
}
}
}
/script
最后我们来看看渲染后的结果
转自：https://www.cnblogs.com/fei-H/p/11359028.html
【Vue】vue递归组件实现多级列表 相关文章
Vue 轻量级富文本编辑器 Vue-Quill-Editor
Vue 轻量级富文本编辑器 Vue-Quill-Editor 下载 Vue-Quill-Editor npm install vue-quill-editor -S 下载 quill(Vue-Quill-Editor 需要依赖) npm install quill -S 组件中使用 template div class="edit_container" quill-editor v-model="content" ref="m
springboot+vue发送axios请求引起的跨域问题
项目场景： 提示：axios发送get和post请求都提示： Access to script at ‘XXXX’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Vue中 v-bind的使用
1、v-bind的基本使用 作用：动态的绑定元素的属性 div id="app" !-- 这里不可以使用 mustache 语法 v-bind 有一个语法糖==》 可以直接简写为 : -- img v-bind:src="imageUrl" alt="博客园背景" a v-bind:href="url" target="_blank"百度一下/a !--语法糖写法
Vue3.0新特性
Vue3.0新特性 Vue3.0 的设计目标可以概括为体积更
Vue学习笔记
库和框架的区别:- 库(如jQuery) 库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API- 框架 框架提供了一套完整解决方案, 使用者要按照框架所规定的某种规范进行开发 vue的基本操作： 1. body中,设置Vue管理的视图div id="app"/div 2. 引入vue.js
VUE 3.0 初体验之路
码文不易啊，转载请带上本文链接呀，感谢感谢 https://www.cnblogs.com/echoyya/p/14394057.html 在2020年9月中旬，vue.js发布了3.0正式版，在不久的将来，VUE3.0 也终将成为大前端的必然趋势， 环境搭建 node 版本要求: Node.js8.9 或更高版本 ,输入 node -
vue-amap 定位实现
vue-amap 定位实现 官方文档：vue-amap 需求：当进入地图页面，定位到当前位置，显示点坐标，搜索框显示当前坐标的具体位置。点击地图，搜索框显示点击坐标的具体位置，搜索后地图中心点为搜索后的位置。 注册并登录高德控制台 创建应用申请 key，切记一定要
v-model双向绑定原理
//Vue.js文件 class Vue { constructor(el, data) { this.el = document.querySelector(el); // this._data = data; this.data = data; this.domPool = {} this.init(); } init() { this.initData(); this.initDom() } initDom() { this.bindDom(this.el) th
总结Vue父子组件的7种通信方式
前言：：： 父子组件要始终保持单向数据流动 否则随着业务增长，代码会变得难以维护与调试，因为数据变化的触发点很难找到 解决方案： 子组件通过this.$emit()事件通知父组件来做处理(sync关键字是帮助这种情况而实现的 语法糖) 最近工作不太顺利，也非常
Vue + Element UI 视频上传及上传进度展示
Vue + Element UI 视频上传及上传进度展示 div class="album albumvideo" div p class="type_title" span视频介绍/span /p div class="pic_img" div class="pic_img_box" el-upload class="avatar-uploader" action="上传地址" v-bind:data="{FoldPath:'上传