vue2.0导航菜单切换
css*{margin:0;padding: 0;}ul li{list-style: none;}.navul{margin:100px auto 20px;overflow: hidden;}.navul li{background-color: #5597b4;padding...
·
css
*{
margin:0;
padding: 0;
}
ul li{
list-style: none;
}
.navul{
margin:100px auto 20px;
overflow: hidden;
}
.navul li{
background-color: #5597b4;
padding:18px 30px;
float:left;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.active{
background-color: #5597b4;
}
.home .home,.new .new,.contact .contact,.service .service{
background-color: skyblue;
}
.checked{
background: #eff4f7;
}
第一种写法
通过当前元素的下标对应当前点击的元素
html
<div id="nav">
<ul>
<li v-for="(relation,index) in relations" v-bind:id="relation.id" v-bind:id="relation.id" v-bind:class="{checked:index==nowIndex}" v-on:click="relationClick(index)">
<i></i>
<span class="">{{relation.text}}</span>
</li>
</ul>
</div>
js
<script src="js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
var nav = new Vue({
el:'#nav',
data:{
relations: [
{text:'项目',id:'program'},
{text:'人员',id:'person'},
{text:'机构',id:'organization'},
{text:'技术',id:'tech'},
{text:'地区',id:'location'},
{text:'国家',id:'country'}
],
nowIndex:-1,
},
methods:{
relationClick:function(index){
this.nowIndex=index;
}
}
});
</script>
第二种写法
通过每条数据的特有属性(例如,例子中的id属性),点击传不同的参,对应当前点击元素。
html
<div id="nav">
<ul>
<li v-for="(relation,index) in relations" v-bind:id="relation.id" v-bind:id="relation.id" v-bind:class="{checked:relation.id==nowId}" v-on:click="relationClick(relation)">
<i></i>
<span class="">{{relation.text}}</span>
</li>
</ul>
</div>
js:
<script type="text/javascript">
var nav = new Vue({
el:'#nav',
data:{
relations: [
{text:'项目',id:'program'},
{text:'人员',id:'person'},
{text:'机构',id:'organization'},
{text:'技术',id:'tech'},
{text:'地区',id:'location'},
{text:'国家',id:'country'}
],
nowId:'',
},
methods:{
relationClick:function(item){
this.nowId=item.id;
}
}
});
</script>
第三种写法
vue-router实现路由跳转
main.js
import Vue from 'vue'
import router from './router'
// const iView = require('iview')
Vue.use(router)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
app.vue
<div class="viewbar">
<router-view></router-view>
</div>
route文件里index.js
import Vue from 'vue'
import Router from 'vue-router'
import Guide from './../pages/guideIndex/guideView.vue'
import Dispose from './../pages/disposedCenter/disposeIndex.vue'
import SystemIndex from './../pages/disposedCenter/systemSave/systemIndex.vue'
import LogIndex from './../pages/disposedCenter/logManage/logIndex.vue'
Vue.use(Router)
export default new Router({
mode: 'hash',
routes: [
// 当无路由时,跳转到概览
{
path: '/',
name: '',
redirect: '/GeneralView'
},
// 概览
{
path: '/GeneralView',
name: 'GeneralView',
component: Guide
},
// 二级菜单
{
path: '/DisposedCenter',
name: 'DisposedCenter',
// redirect: '/DisposedCenter/ApplationIndex',
component: Dispose,
children: [
// 系统维护
{
path: 'Syetem',
name: 'Syetem',
component: SystemIndex
},
// 日志管理
{
path: 'logManage',
name: 'logManage',
component: LogIndex
},
]
},
]
})
页面跳转时
<router-link to='/Guide' tag='div'><a href="/Guide">首页</a></router-link>
<router-link to='/Dispose' tag='div'><a href="/Dispose">概览</a></router-link>
通过方法跳转
this.$router.push({ name: 'GeneralView', params: { auth:'' }});
// params为路由附带的参数
this.$router.push({ path: '/Guide/..', query: { auth:'' }});
更多推荐
已为社区贡献5条内容
所有评论(0)