欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue中树形结构简单实现

程序员文章站 2022-06-08 16:30:37
...

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>

相关标签: vue 树形 结构