一、思路
动态添加激活样式
:class="index == active?'active':''"
我是把导航的每一项都列在数据项里边的
主要事件
<div v-for="(item,index) in navList" :key="index" :class="index == active?'active':''" @mousemove="active = index" @mouseout="active = null"@click="toPage(index)">{{ item.name }} </div>
完整代码：
<template><div class="page"><div class="nav"><div v-for="(item,index) in navList" :key="index" :class="index == active?'active':''" @mousemove="active = index" @mouseout="active = null"@click="toPage(index)">{{ item.name }} </div></div><div style="height:600px"><el-image class="img" width="100%" :src="require('@/assets/img/banner-1.jpg')" fit="cover"></el-image></div></div></template><script>export default {name: "Banner",data () {return {active: null,navList: [{ name: '首页' },{ name: '产品列表' },{ name: '产品详情' },{ name: '购物车' },{ name: '加入我们' },{ name: '企业文化' },]}},created () {this.active = this.$route.query.active},methods: {toPage (e) {console.log(e, 'e')switch (e) {case 0:this.$router.push({ path: '/index', query: { active: this.active } })breakcase 1:this.$router.push({ path: '/index', query: { active: this.active } })breakcase 2:this.$router.push({ path: '/food', query: { active: this.active } })breakcase 3:this.$router.push({ path: '/me', query: { active: this.active } })breakcase 4:this.$router.push({ path: '/joinUs' })break}}}}</script><style lang="scss" scoped>.page {.nav {width: 100%;display: flex;justify-content: space-around;z-index: 9;position: absolute;top: 20px;font-size: 20px;cursor: pointer;div{width: 150px;text-align: center;line-height: 50px;}}.img {width: 100%;height: 100%;}.active {background: #486341;color: #ffffff;// padding: 0 5px;//min-width: 120px;}}</style>
