vue实现移动端底部导航栏使用v-for渲染 内部有图标图标下面有文字图标离左右边距15px图标中间的距离要相等

代码如下：

<template>
  <div class="nav-bar">
    <div class="nav-item" v-for="(item, index) in navList" :key="index">
      <div class="icon">
        <img :src="item.icon" alt="">
      </div>
      <div class="text">{{ item.text }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        { icon: 'img/home.png', text: '首页' },
        { icon: 'img/category.png', text: '分类' },
        { icon: 'img/cart.png', text: '购物车' },
        { icon: 'img/mine.png', text: '我的' }
      ]
    }
  }
}
</script>

<style>
.nav-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #fff;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon {
  margin-bottom: 6px;
}

.icon img {
  width: 24px;
  height: 24px;
}

.text {
  font-size: 12px;
  color: #666;
  text-align: center;
}
</style>

其中，navList为导航栏的数据源，包括每个导航项的图标和文字。使用v-for指令对navList进行遍历渲染，每个导航项都有一个icon和text两个子元素，分别显示图标和文字。在样式上，使用flex布局将导航项平均分配在父容器中，icon和text之间设置合适的间距，并进行居中对齐