vueを使ってツリーメニューバー機能を実装する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

vueを使ってツリーメニューバー機能を実装する

php中世界最好的语言

Jun 15, 2018 pm 03:15 PM

vue ツリーメニュー

今回は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 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue-cli による Webpack テンプレートのエラー報告の初期化

webpack.config.js パラメーターの使用方法のチュートリアル

以上がvueを使ってツリーメニューバー機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7514

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

VUEのボタンに関数を追加する方法 Apr 08, 2025 am 08:51 AM

HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

vue.jsでJSファイルを参照する方法 Apr 07, 2025 pm 11:27 PM

vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。

VueでWatchの使用方法 Apr 07, 2025 pm 11:36 PM

Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。

Vueによる前のページに戻る方法 Apr 07, 2025 pm 11:30 PM

vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。

Vueはマーキー/テキストスクロール効果を実現します Apr 07, 2025 pm 10:51 PM

CSSアニメーションまたはサードパーティライブラリを使用して、VUEでマーキー/テキストスクロール効果を実装します。この記事では、CSSアニメーションの使用方法を紹介します。スクロールテキストを作成し、テキストを＆lt; div＆gt;をラップします。 CSSアニメーションを定義し、オーバーフローを設定します：非表示、幅、アニメーション。キーフレームを定義し、アニメーションの開始と終了時にtranslatex（）を設定します。期間、スクロール速度、方向などのアニメーションプロパティを調整します。

Vueのバージョンを照会する方法 Apr 07, 2025 pm 11:24 PM

Vue Devtoolsを使用してブラウザのコンソールでVueタブを表示することにより、Vueバージョンを照会できます。 NPMを使用して、「NPM List -G Vue」コマンドを実行します。 package.jsonファイルの「依存関係」オブジェクトでVueアイテムを見つけます。 Vue CLIプロジェクトの場合、「Vue -Version」コマンドを実行します。＆lt; script＆gt;でバージョン情報を確認してくださいVueファイルを参照するHTMLファイルにタグを付けます。

Vue Multi-Page開発とはどういう意味ですか？ Apr 07, 2025 pm 11:57 PM

VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス：アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性：各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング：ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化：各ページには独自のURLがあり、SEOに役立ちます。

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

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック