Maison > Article > interface Web > vue fait un menu
vue fait un menu
- php中世界最好的语言original
- 2018-06-15 15:19:341698parcourir
Cette fois je vais vous montrer comment faire un menu avec Vue Quelles sont les précautions pour faire un menu avec Vue Voici un cas pratique, jetons un oeil.
<!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='app' @click='hideTree($event)'>
<button @click.stop="show = !show">点我</button>
<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
<item v-bind:tree='treeData' id='tree' v-if="show"></item>
</transition>
</p>
<template id='tree-template'>
<ul>
<li v-for='(v,i) in tree'>
<span v-if="isFolder(v)" @click="toggle(i)">{{ tree[i].open ? '-' : '+' }}</span>
<a data-id="v.id">{{v.city}}</a>
<item v-bind:tree='v.child' 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('item', {
template: '#tree-template',
props: ['tree'],
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: '#app',
data: {
treeData: treeData,
show:false,
},
methods: {
hideTree:function(e){
if(e.target.id == 'app'){
console.log(137);
this.show = false;
}
}
},
created: function () {
function _addOpen(data) {
for (var i = 0; i < data.length; i++) {
data[i]['open'] = false;
if (data[i].child.length > 0) {
_addOpen(data[i].child);
}
}
}
_addOpen(this.treeData);
}
});
</script>
</body>
</html>Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
vue-cli+webpack ne peut pas créer un nouveau projet
React effectue une transformation de rendu sur le serveur
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser l'interaction clavier p5.js dans un projetArticle suivant：Comment utiliser l'interaction clavier p5.js dans un projet