用vue写一个京东底部导航栏,实现点击变色的样式
时间: 2023-04-11 18:01:26 浏览: 264
好的,这个问题可以回答。您可以使用Vue的v-bind:class指令来实现点击变色的样式。首先,在data中定义一个变量来存储当前选中的导航栏项的索引,然后在模板中使用v-for指令循环渲染导航栏项,并使用v-bind:class指令绑定样式类。当导航栏项被点击时,使用@click事件触发一个方法来更新当前选中的导航栏项的索引,从而改变样式类的绑定。
相关问题
用vue代码写一个京东底部导航栏,实现点击变色的样式,并给出完整代码
以下是用Vue代码实现京东底部导航栏点击变色的样式的完整代码:
<template>
<div class="nav-bar">
<div class="nav-item" :class="{active: activeIndex === 0}" @click="activeIndex = 0">
<i class="iconfont icon-home"></i>
<span>首页</span>
</div>
<div class="nav-item" :class="{active: activeIndex === 1}" @click="activeIndex = 1">
<i class="iconfont icon-category"></i>
<span>分类</span>
</div>
<div class="nav-item" :class="{active: activeIndex === 2}" @click="activeIndex = 2">
<i class="iconfont icon-cart"></i>
<span>购物车</span>
</div>
<div class="nav-item" :class="{active: activeIndex === 3}" @click="activeIndex = 3">
<i class="iconfont icon-my"></i>
<span>我的</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: 0
}
}
}
</script>
<style scoped>
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
background-color: #fff;
border-top: 1px solid #eee;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
}
.nav-item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
color: #999;
}
.nav-item.active {
color: #f00;
}
</style>
vue底部导航栏点击切换样式
你可以使用Vue的条件渲染和class绑定来实现底部导航栏的点击切换样式。
首先,在Vue组件中,定义一个data属性来表示当前选中的导航项:
```
data() {
return {
currentTab: 'home'
}
}
```
然后,在模板中使用条件渲染和class绑定来根据当前选中的导航项添加不同的样式:
```
<template>
<div>
<router-link to="/" class="tab-item" :class="{active: currentTab === 'home'}">首页</router-link>
<router-link to="/about" class="tab-item" :class="{active: currentTab === 'about'}">关于我们</router-link>
<router-link to="/contact" class="tab-item" :class="{active: currentTab === 'contact'}">联系我们</router-link>
</div>
</template>
```
这里通过:class绑定来给选中的导航项添加active类,然后在CSS中定义active类的样式即可。
最后,在每个导航项的点击事件中更新当前选中的导航项:
```
methods: {
selectTab(tab) {
this.currentTab = tab
}
}
```
完整的代码示例:
```
<template>
<div>
<router-link to="/" class="tab-item" :class="{active: currentTab === 'home'}" @click="selectTab('home')">首页</router-link>
<router-link to="/about" class="tab-item" :class="{active: currentTab === 'about'}" @click="selectTab('about')">关于我们</router-link>
<router-link to="/contact" class="tab-item" :class="{active: currentTab === 'contact'}" @click="selectTab('contact')">联系我们</router-link>
</div>
</template>
<script>
export default {
data() {
return {
currentTab: 'home'
}
},
methods: {
selectTab(tab) {
this.currentTab = tab
}
}
}
</script>
<style>
.tab-item {
/* 导航项的样式 */
}
.tab-item.active {
/* 选中导航项的样式 */
}
</style>
```