vue做出树形菜单步骤详解-js教程-PHP中文网

首页

web前端

js教程

vue做出树形菜单步骤详解

php中世界最好的语言

May 10, 2018 am 10:41 AM

步骤菜单详解

这次给大家带来vue做出树形菜单步骤详解，vue做出树形菜单的注意事项有哪些，下面就是实战案例，一起来看一下。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>vue</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="animate.css">
 <script src="vue.js"></script>
 <style>
  *{
  color:#585858;
  
  }
  #app{
  min-height: 650px;
  }
  #app li{
  list-style-type:none;
  }
  #app a{
  text-decoration:none;
  }
  #app button{
  width:100%;
  }
  #app ul{
  padding:10px;
  }
  #app span{
  cursor:pointer;
  }
  #tree{
  border: 1px solid #ccc;  
  min-height: 650px;
  width: 50%;
  margin:0;
  padding-top: 10px;
  background-color:#f2f2f2;
  position: absolute;
  top:0;
  left:0;
  }
  
  #tree li {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
  min-height: 32px;
  line-height:32px;
  }
 </style>
 </head>
 <body>
 <p id=&#39;app&#39; @click=&#39;hideTree($event)&#39;>
  <button @click.stop="show = !show">点我</button>
  
  <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
  <item v-bind:tree=&#39;treeData&#39; id=&#39;tree&#39; v-if="show"></item> 
  </transition> 
 </p>
 <template id=&#39;tree-template&#39;>
  <ul>
  <li v-for=&#39;(v,i) in tree&#39;> 
   <span v-if="isFolder(v)" @click="toggle(i)">{{ tree[i].open ? '-' : '+' }}</span>
   <a data-id="v.id">{{v.city}}</a> 
   <item v-bind:tree=&#39;v.child&#39; v-show="tree[i].open"></item>
  </li>
  </ul> 
 </template>
 <script>
  var data = [{"id":26,"pid":1,"city":"四川省"},{"id":30,"pid":1,"city":"云南省"},{"id":322,"pid":26,"city":"成都"},{"id":323,"pid":26,"city":"绵阳"},{"id":324,"pid":26,"city":"阿坝"},{"id":325,"pid":26,"city":"巴中"},{"id":326,"pid":26,"city":"达州"},{"id":327,"pid":26,"city":"德阳"},{"id":328,"pid":26,"city":"甘孜"},{"id":329,"pid":26,"city":"广安"},{"id":330,"pid":26,"city":"广元"},{"id":331,"pid":26,"city":"乐山"},{"id":332,"pid":26,"city":"凉山"},{"id":333,"pid":26,"city":"眉山"},{"id":334,"pid":26,"city":"南充"},{"id":335,"pid":26,"city":"内江"},{"id":336,"pid":26,"city":"攀枝花"},{"id":337,"pid":26,"city":"遂宁"},{"id":338,"pid":26,"city":"雅安"},{"id":339,"pid":26,"city":"宜宾"},{"id":340,"pid":26,"city":"资阳"},{"id":341,"pid":26,"city":"自贡"},{"id":342,"pid":26,"city":"泸州"},{"id":367,"pid":30,"city":"昆明"},{"id":378,"pid":30,"city":"曲靖"},{"id":3100,"pid":367,"city":"盘龙区"},{"id":3101,"pid":367,"city":"五华区"},{"id":3102,"pid":367,"city":"官渡区"},{"id":3103,"pid":367,"city":"西山区"},{"id":3104,"pid":367,"city":"东川区"},{"id":3105,"pid":367,"city":"安宁市"},{"id":3106,"pid":367,"city":"呈贡县"},{"id":3107,"pid":367,"city":"晋宁县"},{"id":3108,"pid":367,"city":"富民县"},{"id":3109,"pid":367,"city":"宜良县"},{"id":3110,"pid":367,"city":"嵩明县"},{"id":3111,"pid":367,"city":"石林县"},{"id":3112,"pid":367,"city":"禄劝"},{"id":3113,"pid":367,"city":"寻甸"},{"id":3189,"pid":378,"city":"麒麟区"},{"id":3190,"pid":378,"city":"宣威市"},{"id":3191,"pid":378,"city":"马龙县"},{"id":3192,"pid":378,"city":"陆良县"},{"id":3193,"pid":378,"city":"师宗县"},{"id":3194,"pid":378,"city":"罗平县"},{"id":3195,"pid":378,"city":"富源县"},{"id":3196,"pid":378,"city":"会泽县"},{"id":3197,"pid":378,"city":"沾益县"}];
  var treeData = createTree({
  idname:'id',
  pidname:'pid',
  rootid:1,
  data:data
  });
  function createTree(arg){
  var idname = arg.idname,
   pidname = arg.pidname,
   rootid = arg.rootid,
   data = arg.data,
   treeData = [];
  var _createTree = function(id){
   var ret = []; 
   var index = 0;
   for(var i = 0; i < data.length; i++){  
   if(data[i][pidname] == id){
    ret[index] = data[i];
    ret[index].child = _createTree(data[i][idname]);
    index++;
   } 
   }
   return ret;
  }
  var index = 0;
  for(var i = 0; i < data.length; i++){  
   if(data[i][pidname] == rootid){
   treeData[index] = data[i];
   treeData[index].child = _createTree(data[i][idname]);
   index++;
   } 
  }
  return treeData;
  }
  Vue.component(&#39;item&#39;, {
  template: &#39;#tree-template&#39;,
  props: [&#39;tree&#39;],
  data: function () {
   return {}
  },
  methods: {
   toggle: function (i) {
   this.tree[i].open = !this.tree[i].open;
   this.$set(this.tree, i, this.tree[i]);
   },
   isFolder: function (data) {
   return data.child && data.child.length
   },
  },
  })
  var vm = new Vue({
  el: &#39;#app&#39;,
  data: {
   treeData: treeData,
   show:false,
  },
  methods: {
   hideTree:function(e){
   if(e.target.id == &#39;app&#39;){
    console.log(137);
    this.show = false;
   }
   }
  },
  created: function () {
   function _addOpen(data) {
   for (var i = 0; i < data.length; i++) {
    data[i][&#39;open&#39;] = false;
    if (data[i].child.length > 0) {
    _addOpen(data[i].child);
    }
   }
   }
   _addOpen(this.treeData);
  }
  });
 </script>
 </body>
</html>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7547

CakePHP 教程

1382

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何在iPhone中使Google地图成为默认地图 Apr 17, 2024 pm 07:34 PM

iPhone上的默认地图是Apple专有的地理位置提供商“地图”。尽管地图越来越好，但它在美国以外的地区运行不佳。与谷歌地图相比，它没有什么可提供的。在本文中，我们讨论了使用Google地图成为iPhone上的默认地图的可行性步骤。如何在iPhone中使Google地图成为默认地图将Google地图设置为手机上的默认地图应用程序比您想象的要容易。请按照以下步骤操作–先决条件步骤–您必须在手机上安装Gmail。步骤1–打开AppStore。步骤2–搜索“Gmail”。步骤3–点击Gmail应用旁

升级微信最新版本的步骤（轻松掌握微信最新版本的升级方法） Jun 01, 2024 pm 10:24 PM

不断推出新版本以提供更好的使用体验，微信作为中国的社交媒体平台之一。升级微信至最新版本是非常重要的，家人和同事的联系、为了保持与朋友、及时了解最新动态。1.了解最新版本的特性与改进了解最新版本的特性与改进非常重要，在升级微信之前。性能改进和错误修复，通过查看微信官方网站或应用商店中的更新说明、你可以了解到新版本所带来的各种新功能。2.检查当前微信版本我们需要检查当前手机上已安装的微信版本、在升级微信之前。点击，打开微信应用“我”然后选择，菜单“关于”在这里你可以看到当前微信的版本号，。3.打开应

此 Apple ID 尚未在 iTunes Store 中使用：修复 Jun 10, 2024 pm 05:42 PM

使用AppleID登录iTunesStore时，可能会在屏幕上抛出此错误提示“此AppleID尚未在iTunesStore中使用”。没有什么可担心的错误提示，您可以按照这些解决方案集进行修复。修复1–更改送货地址此提示出现在iTunesStore中的主要原因是您的AppleID个人资料中没有正确的地址。步骤1–首先，打开iPhone上的iPhone设置。步骤2–AppleID应位于所有其他设置的顶部。所以，打开它。步骤3–在那里，打开“付款和运输”选项。步骤4–使用面容ID验证您的访问权限。步骤

Shazam应用程序在iPhone中无法运行：修复 Jun 08, 2024 pm 12:36 PM

iPhone上的Shazam应用程序有问题？Shazam可帮助您通过聆听歌曲找到歌曲。但是，如果Shazam无法正常工作或无法识别歌曲，则必须手动对其进行故障排除。修复Shazam应用程序不会花费很长时间。因此，无需再浪费时间，请按照以下步骤解决Shazam应用程序的问题。修复1–禁用粗体文本功能iPhone上的粗体文本可能是Shazam无法正常运行的原因。步骤1–您只能从iPhone设置中执行此操作。所以，打开它。步骤2–接下来，打开其中的“显示和亮度”设置。步骤3–如果您发现启用了“粗体文本

Win11系统管理员权限获取步骤详解 Mar 08, 2024 pm 09:09 PM

Windows11作为微软最新推出的操作系统，深受广大用户喜爱。在使用Windows11的过程中，有时候我们需要获取系统管理员权限，以便进行一些需要权限的操作。接下来将详细介绍在Windows11中获取系统管理员权限的步骤。第一步，点击“开始菜单”，在左下角可以看到Windows图标，点击该图标便可打开“开始菜单”。第二步，在“开始菜单”中寻找并点击“

iPhone屏幕截图不起作用：如何修复 May 03, 2024 pm 09:16 PM

屏幕截图功能在您的iPhone上不起作用吗？截屏非常简单，因为您只需同时按住“提高音量”按钮和“电源”按钮即可抓取手机屏幕。但是，还有其他方法可以在设备上捕获帧。修复1–使用辅助触摸使用辅助触摸功能截取屏幕截图。步骤1–转到您的手机设置。步骤2–接下来，点击以打开“辅助功能”设置。步骤3–打开“触摸”设置。步骤4–接下来，打开“辅助触摸”设置。步骤5–打开手机上的“辅助触摸”。步骤6–打开“自定义顶级菜单”以访问它。步骤7–现在，您只需将这些功能中的任何一个链接到屏幕捕获即可。因此，点击那里的首

iPhone中缺少时钟应用程序：如何修复 May 03, 2024 pm 09:19 PM

您的手机中缺少时钟应用程序吗？日期和时间仍将显示在iPhone的状态栏上。但是，如果没有时钟应用程序，您将无法使用世界时钟、秒表、闹钟等多项功能。因此，修复时钟应用程序的缺失应该是您的待办事项列表的首位。这些解决方案可以帮助您解决此问题。修复1–放置时钟应用程序如果您错误地从主屏幕中删除了时钟应用程序，您可以将时钟应用程序放回原位。步骤1–解锁iPhone并开始向左侧滑动，直到到达“应用程序库”页面。步骤2–接下来，在搜索框中搜索“时钟”。步骤3–当您在搜索结果中看到下方的“时钟”时，请按住它并

iPhone上的Safari缩小问题：这是修复程序 Apr 20, 2024 am 08:08 AM

如果您无法控制Safari中的缩放级别，完成工作可能会非常棘手。因此，如果Safari看起来被缩小了，那对您来说可能会有问题。您可以通过以下几种方法解决Safari中的这个缩小小问题。1.光标放大：在Safari菜单栏中选择“显示”>“放大光标”。这将使光标在屏幕上更加显眼，从而更容易控制。2.移动鼠标：这可能听起来很简单，但有时只需将鼠标移动到屏幕上的另一个位置，可能会自动恢复正常大小。3.使用键盘快捷键修复1–重置缩放级别您可以直接从Safari浏览器控制缩放级别。步骤1–当您在Safari

See all articles

vue做出树形菜单步骤详解

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题