1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <template>
<ul>
<li
v-for="(item,id) in menus"
:key="id"
:class="menuActive == item.id ? 'isActive' : ''"
@click="menuClickActive(item)"
>
{{ item.title }}
</li>
</ul>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue';
interface menuType{
id:string,
title:string,
}
const menus =ref<menuType[]>([
{ id:'01',title: '首頁' },
{ id:'03',title: '關於我們' },
{ id:'02',title: '聯絡我們' }
])
const menuActive =ref<string |any>('01')
const menuClickActive =(item:menuType)=>{
menuActive.value=index.id;
}
</script>
<style lang="css">
ul{
display:flex;
li{
display:flex;
margin:auto 10px;
&.isActive{
border-bottom:1px solid #333;
}
}
}
</style>
|