Heim > Artikel > Web-Frontend > Beispielcode für eine baumförmige Schüssel, implementiert von Vue

Beispielcode für eine baumförmige Schüssel, implementiert von Vue

亚连Original: 2018-05-29 15:16:541468Durchsuche

In diesem Artikel wird hauptsächlich das von vue implementierte Baummenü vorgestellt.

Der folgende Code stellt die von vue implementierte Baummenüfunktion vor. Der spezifische Code lautet wie folgt:

<!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" rel="external nofollow" >
    <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 ? &#39;-&#39; : &#39;+&#39; }}</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:&#39;id&#39;,
        pidname:&#39;pid&#39;,
        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>

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Javascript kapselt nativ einen Funktionstest-Beispielcode mit einem Ein- und Ausblendeffekt

Fünf gemeinsame JavaScript-Funktionen

Detaillierte Erläuterung von Build and Serve mit Angular CLI

Das obige ist der detaillierte Inhalt vonBeispielcode für eine baumförmige Schüssel, implementiert von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：p5.js Einführungs-Tutorial zur TastaturinteraktionNächster Artikel：p5.js Einführungs-Tutorial zur Tastaturinteraktion

In Verbindung stehende Artikel

Mehr sehen