Vue中树形结构简单实现

Vue中树形结构简单实现

效果

• 

代码

<template >
  <div>
    <grouplists :datas='datas'></grouplists>
  </div>
</template>

<script>


export default {  //这儿用的脚手架，若是普通文件，这儿就是new Vue（{}）
  data(){
    return {
    datas:[{
      "name":"组1",
      "sublists":[{
        "name":"组1-1"
        }
      ]
    }]
    }
  },
  components:{
    grouplists:{
      name:'gs',
      template:`
      <ul >
        <li v-for='a in datas' @click.stop.self='show=!show'>
          <img src="图片地址url"/>
          组名：{{a.name}}
          <gs :datas='a.sublists' v-if='show' ></gs>
        </li>
      </ul>`,
      props:['datas'],
      data(){
        return {
          show:false
        }
      }
    }
  }
}
</script>
<style>
  li{list-style-type:none;}
</style>