用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>