vue3+ts 实现顶部菜单
时间: 2023-08-13 12:56:49 浏览: 61
你可以使用Vue 3和TypeScript来实现顶部菜单。下面是一个简单的示例:
首先,创建一个名为Menu.vue的组件,用于渲染顶部菜单:
```vue
<template>
<div class="menu">
<ul>
<li v-for="item in menuItems" :key="item.id">{{ item.title }}</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
data() {
return {
menuItems: [
{ id: 1, title: 'Home' },
{ id: 2, title: 'About' },
{ id: 3, title: 'Contact' },
],
};
},
});
</script>
<style scoped>
.menu {
background-color: #f0f0f0;
padding: 10px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
margin-right: 10px;
cursor: pointer;
}
</style>
```
然后,在父组件中使用Menu组件:
```vue
<template>
<div>
<menu></menu>
<!-- 其他内容 -->
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import Menu from './Menu.vue';
export default defineComponent({
components: {
Menu,
},
});
</script>
```
这样,你就可以在你的Vue 3 + TypeScript项目中实现一个简单的顶部菜单了。你可以根据自己的需求进行样式和功能的扩展。