> 웹 프론트엔드 > JS 튜토리얼 > Vue에서 트리 메뉴를 생성하는 단계에 대한 자세한 설명

Vue에서 트리 메뉴를 생성하는 단계에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-05-10 10:41:51
원래의
2168명이 탐색했습니다.

이번에는 Vue로 트리 메뉴를 만드는 과정에 대해 자세히 설명하겠습니다. Vue로 트리 메뉴를 만들 때 주의사항은 무엇인가요?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

<!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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

반응 네이티브 패키지 플러그인 swiper를 사용하는 단계에 대한 자세한 설명

캐싱 알고리즘의 FIFO/LRU 구현

위 내용은 Vue에서 트리 메뉴를 생성하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿