vue3侧边栏导航循环遍历icon

你可以使用`v-for`指令在Vue3中循环遍历侧边栏导航，同时使用第三方图标库（如Font Awesome）提供的icon。以下是一个示例代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in navItems" :key="index">
        <a :href="item.link">
          <i :class="item.icon"></i> {{ item.title }}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        {
          title: "Home",
          link: "/",
          icon: "fas fa-home" // Font Awesome提供的icon类名
        },
        {
          title: "About",
          link: "/about",
          icon: "fas fa-info-circle"
        },
        {
          title: "Contact",
          link: "/contact",
          icon: "fas fa-envelope"
        },
        // 循环遍历的数据可以自行添加或从后端API获取
      ]
    };
  }
};
</script>

在上面的代码中，`navItems`数组中存储了侧边栏导航的数据，包括每个导航项的标题、链接和图标类名。使用`v-for`指令在模板中循环遍历这些导航项，并将每个图标的类名绑定到`<i>`元素的`class`属性上，以显示相应的图标。