一.實現效果
二.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.目錄問題:./當前文件所在目錄;…/父文件所在目錄;/根目錄