Vue 移动端底部导航栏实现 - 使用 v-for 渲染图标和文字

<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>
<p>该代码使用 Vue 框架实现移动端底部导航栏。</p>
<ul>
<li><code>navList</code> 是导航栏的数据源，包含每个导航项的图标和文字。</li>
<li>使用 <code>v-for</code> 指令遍历 <code>navList</code>，渲染每个导航项。</li>
<li>每个导航项都有 <code>icon</code> 和 <code>text</code> 两个子元素，分别显示图标和文字。</li>
<li>使用 <code>flex</code> 布局将导航项平均分配在父容器中。</li>
<li><code>icon</code> 和 <code>text</code> 之间设置合适的间距，并进行居中对齐。</li>
</ul>
<p>您可以根据实际需求修改 <code>navList</code> 数据源和样式代码。</p>