每⽇⼀练12：VUE编写简单的侧边导航栏HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src='js/vue.js'></script>
<title>Document</title>
</head>
<body>
<div class="tree" id='menu'>
<ul>
<li class="p_item" v-for="(lists,index) in list">
<p class="p_title" @click="idx(index)">{{lists.name}}
</p>
<ul class="c_item" v-show ="index==n">
<li v-for="sub in lists.subLists">
<a>{{sub.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
<script>
new Vue({
el: '#menu',
data: {
list: [{
name: "四川1",
subLists: [{
name: "綿陽1"
}, {
name: "瀘州1"
}, {
name: "簡陽1"
}]
}, {
name: "四川2",
subLists: [{
js导航栏下拉菜单name: "綿陽2"
}, {
name: "瀘州2"
}, {
name: "簡陽2"
}]
}, {
name: "四川3",
subLists: [{
name: "綿陽3"
}, {
name: "瀘州3"
}, {
name: "簡陽3"
}]
}],
n:0
n:0
},
methods: {
idx: function (i) {                        this.n = i
}
}
})
}
</script>
</body>
</html>
CSS：
* {
padding: 0px;
margin: 0px;
}
ul {
list-style-type: none;
}
a {
color: #ffffff;
text-decoration: none;
}
body {
font-size: 14px;
background-color: #f9f9f9;
}
body,html{
width:100%;
height:100%;
}
.tree {
width: 150px;
height: 100%;
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); }
.p_title {
color: #222;
display: block;
padding: 15px;
cursor:pointer;
}
.p_title b{
float: right;
transition:all ease 1s;
-webkit-transition:all ease .7s;
}
.down {
transform: rotate(180deg);
}
.up {
transform: rotate(0deg);
}
.p_title:hover {
color: #999;
}
.c_item a {
display: block;
padding: 10px 20px;
background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);    color: #222;
cursor:pointer;
}
.c_item a:hover {
color:#999;
}
显⽰结果如图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。