使用Vue实现导航栏

<template>
  <nav>
    <ul>
      <li v-for="item in items" :key="item.id">
        <a :href="item.link">{{ item.text }}</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Home', link: '/home' },
        { id: 2, text: 'About', link: '/about' },
        { id: 3, text: 'Contact', link: '/contact' }
      ]
    }
  }
}
</script>

<style>
nav {
  display: flex;
  justify-content: center;
  background-color: lightgray;
  padding: 10px;
}

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

li {
  margin: 0 10px;
}

a {
  color: white;
  text-decoration: none;
}
</style>

上面的代码使用了Vue的v-for指令，将导航栏项目循环渲染到页面中。同时使用了CSS样式控制导航栏的布局和样式。