使用vue3写一个简单的导航页面
时间: 2024-05-15 16:19:14 浏览: 8
以下是一个使用Vue3编写的简单导航页面示例:
HTML模板:
```
<template>
<div class="navbar">
<div class="logo">Logo</div>
<div class="links">
<a v-for="link in links" :key="link.id" :href="link.url">{{ link.title }}</a>
</div>
</div>
</template>
```
JavaScript代码:
```
<script>
export default {
data() {
return {
links: [
{
id: 1,
title: 'Home',
url: '/'
},
{
id: 2,
title: 'About',
url: '/about'
},
{
id: 3,
title: 'Contact',
url: '/contact'
}
]
}
}
}
</script>
```
CSS样式:
```
<style>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #333;
color: #fff;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.links {
display: flex;
}
.links a {
margin-right: 10px;
color: #fff;
text-decoration: none;
}
.links a:hover {
text-decoration: underline;
}
</style>
```
在上面的示例中,我们使用了Vue3的单文件组件来创建导航页面。我们定义了一个包含导航链接的数组,并在模板中使用`v-for`指令来渲染链接列表。我们还将CSS样式添加到组件中,以美化导航栏。