企业网站快照更新/百度发广告需要多少钱

一.实现效果 ​​​​

二.json数据格式展示

三.实现效果
1.点击时箭头（👉到👇）的改变
2.最后一层时无箭头且输出json数据中对应value值
四.实现思路
1.父组件调用子组件，并给子组件传json
2.自定义组件（子组件）用于属性结构展示
3.子组件的自我调用

四.代码实现 父组件app.vue

<template>	<div class = 'courseInfo'><!--my-tree即自定义的组件，冒号即v-bind属性绑定--><my-tree :data="jsonyz"/> </div>
</template>
<script>
import MyTree from "./my_tree.vue" //引入子组件
export default {components:{'my-tree':MyTree,     //声明子组件},data() {return {name: 'App',jsonyz :{"1.1 集合与集合的表示方法": {"1.1.1 集合的概念": {"集合的含义": 25002,"元素与集合关系的判断": 25003,"集合的确定性、互异性、无序性": 25004},"1.1.2 集合的表示方法": {"集合的表示法": 25006}},"1.2 集合之间的关系与运算": {"1.2.1 集合之间的关系": {"子集与真子集": 25007,"集合的包含关系判断及应用": 25008,"集合中元素个数的最值": 25010,"空集的定义、性质及运算": 25011,"集合关系中的参数取值问题": 25012},"1.2.2 集合的运算": {"并集及其运算": 25013,"交集及其运算": 25014,"补集及其运算": 25015,"全集及其运算": 25016,"交、并、补集的混合运算": 25017,"子集与交集、并集运算的转换": 25018,"Venn图表达集合的关系及运算": 25019}},"1.3  提升": {"1.3.1 提升": {"集合中的典型问题分析": 38059,"子集问题": 38060,"集合的综合问题1": 38061,"集合的综合问题2": 38062}}}			}},methods: {},}
</script>
<style>
</style>

子组件my_tree.vue

<template>  <div><!--逐层循环json对象，记得绑定的key只能是number/string类型，不能为对象类型--><div v-for="(value,key,index) in data" :key="index"><!--鼠标点击事件给openIndex赋值，更改open布尔值，并判断value是否为对象类型--><span style="color:red;" @click="openChildList(index,value)">{{key}}<span><!--判断箭头显示-->    <i style="font-size: 18px;" class="el-icon-arrow-down" v-if="openIndex ==index && open == true&&isObj(value)"></i><i style="font-size: 18px;" class="el-icon-arrow-right" v-else-if="isObj(value)"></i></span></span><div v-if="openIndex==index&&open" style="margin-left:20px"><div v-if="isObj(value)"><!--***自我调用***--><my-tree :data="value"/></div></div></div></div>
</template>
<script>
export default {name:'myTree',//接收父组件传过来的值props:['data'],data(){return {open:false,openIndex:-1   //0}},methods:{openChildList(openIndex,value){if(this.openIndex ==openIndex && this.open == true){this.open = false;}else{this.openIndex = openIndex;this.open = true;}if(!this.isObj(value)){console.log(value);}},isObj(o){return typeof(o) == 'object';},}
}
</script>
<style>
</style>

五.涉及
1.父子组件传值
2.自定义组件
3.组件的自我调用
4.Json的解析
5.目录问题：./当前文件所在目录;…/父文件所在目录;/根目录