Vue 首页导航组件示例 - 使用 v-for 循环渲染列表

<template>
  <div class='nav-container'>
    <ul class='nav-list'>
      <li v-for='item in navItems' :key='item.id' class='nav-item'>
        <a :href='item.link'>{{ item.label }}</a>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
  data() {
    return {
      navItems: [
        { id: 1, label: '首页', link: '#' },
        { id: 2, label: '产品', link: '#' },
        { id: 3, label: '解决方案', link: '#' },
        { id: 4, label: '关于我们', link: '#' },
        { id: 5, label: '联系我们', link: '#' },
      ],
    };
  },
};
</script>
<style>
.nav-container {
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin: 0 10px;
}

.nav-item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}

.nav-item a:hover {
  color: #007bff;
}
</style>
<p>此示例使用了 Vue 的组件机制，将导航列表项定义为数据，并使用 v-for 指令渲染列表。每个列表项都是一个 li 元素，其中包含一个 a 元素，用于链接到对应的页面。CSS 样式定义了导航栏的外观和交互效果。</p>