bootstrap 3.x +vue 2.x 饿了么pc端导航模拟

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style>
.nav>li>a {
border-radius: 0;
cursor: pointer;
color: #101010;
}

#pmenu a {
cursor: pointer;
}

#pmenu .active a {
background-color: lightgrey;
color: #080808;
border-radius: 0;
}

#cmenu {
background-color: lightgrey;
}

#cmenu li {
padding: 10px 5px;
}

#cmenu .active a {}
</style>
</head>

<body>
<div id="app">
<topnav></topnav>
</div>
<!--template-->
<template id="topnav-comp">
<div>
<ul class="nav nav-pills nav-justified" id="pmenu">
<li v-for="(nav,index) in navlist" :class="{active:iscurP==index}" @click="iscurP=index">
<a @click="getChild(index)">{{nav.name}}</a>
</li>
</ul>
<ul class="nav nav-pills" id="cmenu">
<li v-for="(navc,index) in navchild" :class="{active:iscurC==index}" @click="iscurC=index">
<a>{{navc.name}}</a>
</li>
</ul>
</div>
</template>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script>
Vue.component('topnav', {
template: '#topnav-comp',
data: function() {
return {
iscurP: 0,
iscurC: 0,
navlist: [],
navchild: []
}
},
methods: {
getNavlist: function() {
var self = this
$.ajax({
url: 'data/navlist.json',
type: 'get',
async: false,
dataType: "json",
success: function(data) {
self.navlist = data;
},
error: function() {
console.log('%c 数据加载失败,请检查数据是否存在', 'background: #222; color: #bada55')
}
});
},
getChild: function(index) {
this.navchild = this.navlist[index].sub_categories;
this.iscurC = 0
}
},
mounted: function() {},
created: function() {
this.getNavlist();
}
});
vm = new Vue({
el: "#app"
})
</script>
</body>

</htm

0 个评论

要回复文章请先登录注册