Vue开发实战
递归组件
关键是组件在模板内能调用自身,关键是name属性
首先我们先定义数据格式
list: [
{
title: '标题1'
},
{
title: '标题2',
children: [
{
title: '标题2-子标题1'
},
{
title: '标题2-子标题2'
}
]
},
{
title: '标题3',
children: [
{
title: '标题3-子标题1',
children: [
{
title: '标题3-子标题1-子标题1'
},
{
title: '标题3-子标题1-子标题2'
}
]
}
]
}
]
首先我们父组件代码
<div v-for='v in list' :key='v.title'>
<div>{{v.title}}</div>
<v-menu v-if='v.children' :data='v.children'></v-menu>
</div>
子组件代码
使用name来调用自身实现递归
<template>
<div>
<div v-for='(v, idx) in data' :key='idx'>
<div>{{v.title}}</div>
<menu-item v-show='v.children' :data='v.children'></menu-item>
</div>
</div>
</template> <script>
export default {
name: 'menu-item',
props: {
data: {
type: Array,
default: () => []
}
}
}
</script>
Vue开发实战的更多相关文章
- 极客时间-vue开发实战学习(ant-design vue作者)
vue基础 属性 事件 插槽 指令(Directives) 生命周期 底层原理 vue生态 路由管理器vue Router 状态管理器vuex 同构Nuxt vue实战 实战项目-ant-desing ...
- Vue-cli+Vue.js2.0+Vuex2.0+vue-router+es6+webpack+node.js脚手架搭建和Vue开发实战
Vue.js是一个构建数据驱动的web界面的渐进式框架.在写这边文章时Vue版本分为1.0++和2.0++,这个是基于Vue2.0的项目. Vue-cli是构建单页应用的脚手架,这个可是官方的. Vu ...
- 极客时间_Vue开发实战_汇总贴
视频地址: https://time.geekbang.org/course/intro/163 https://github.com/tangjinzhou/geektime-vue-1 电脑dem ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
- vue开发环境搭建及热更新
写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...
- webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- vue项目实战, webpack 配置流程记录
vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...
- vue.js 实战 todo list
vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...
- vue前端实战注意事项
1. vue前端实战注意事项 1.1. 预备 1.1.1. Eslint 这是个语法检查工具,我用webstorm作为开发的ide,这个语法检查还是太严格了,一个空格啥的都会报错,对新手来讲还是建议关 ...
随机推荐
- plsql的tns目录配置
在系统环境变量中设置:TNS_ADMIN = E:\app\client\lenovo\product\12.2.0\client_1\network\admin 如果电脑中将来装了多个oracle的 ...
- Android编程之Listener侦听的N种写法及实现原理
写下这个题目时突然想起鲁迅笔下的孔乙已,茴香豆的几种写法,颇有些咬文嚼字的味道.虽然从事手机编程多年,但一直使用的是C和C++编程,由于安卓早期只支持JAVA开发,所以对于时下如火如荼的安卓系统,我一 ...
- 我的黑苹果之路 9400f + msi b360 mortar + 1050ti
硬件配置: CPU:i5 9400f 主板:微型msi迫击炮B360 内存:威刚 ddr4 8g 2133 *2 显卡:技嘉1050ti 4g 显示器:koiso 4K (使用的dp接口连接,hdmi ...
- MySql进行批量插入时的几种sql写法
insert into:插入数据,如果主键重复,则报错 insert repalce:插入替换数据,如果存在主键或unique数据则替换数据 insert ignore:如果存在数据,则忽略. INS ...
- shell 的正则表达式 grep
以上例子的目的在于,正则表达式只能用grep -n 命令中才有作用.在ls中,他的意义是不同的,例如*符号. grep命令的解析 其中,几个特殊的正则表达式: [[:alpha:]] 代表 字母[[: ...
- RMI远端方法调用
一.RMI介绍 RMI(Remote Method Invocation),RMI是分布式对象软件包,它简化了在多台计算机上的JAVA应用之间的通信.必须在jdk1.1以上,RMI用到的类:java. ...
- Codeforces 745E Hongcow Buys a Deck of Cards 状压DP / 模拟退火
题意:现在有n张卡片(n <= 16), 每一轮你可以执行两种操作中的一种.1:获得一张红色令牌和一张蓝色令牌.2:购买一张卡片(如果可以买的话),购买的时候蓝色卡片可以充当蓝色令牌,红色同理, ...
- javascript与jquery删除元素节点
今天工作的时候遇到一个删除的问题,研究了下发现是没有很好的区分js和jquery的删除方法,在此澄清一下 工作的代码如下 // 删除图片 $("#js_takePhotoWrap" ...
- 前端学习(十七)js数组(笔记)
数组: 1. var arr=[1,2,3,4]; 2. var arr=new Array(1,2,3,4,5); 区别: 1.写法不一样,选择第一种(好写) ...
- 【Luogu】【关卡2-10】分治算法(2017年10月)
任务说明:将大问题拆分为小问题,分而治之,各个击破,然后在合并回来. 取余运算||快速幂 幂次方 逆序对 南蛮图腾