<template>
<div>
<!-- <button v-for="menu in menus" :class="[isActive === menu.value ? 'bg-color' :'']" :key="menu.name" @click="activeMenu(menu)"> -->
<button v-for="menu in menus" :class="isActive === menu.value ? 'bg-color' :''" :key="menu.name" @click="activeMenu = menu.name">
{{ menu.name }}
</button>
</div>
</template>
<script setup>
import { ref, onMounted,watch } from 'vue';
const menus = [
{ name: 'home', label: 'Home',value:1 },
{ name: 'about', label: 'About',value:2 },
// ...其他菜单项
];
const isActive = ref(false)
const activeMenu = ref(localStorage.getItem('activeMenu') || 'home');
console.log('0',activeMenu.value);
// 监听activeMenu的变化来更新localStorage
watch(activeMenu, (newValue) => {
localStorage.setItem('activeMenu', newValue);
});
onMounted(() => {
// 页面加载完成后,从localStorage中恢复activeMenu的值
activeMenu.value = localStorage.getItem('activeMenu') || 'home';
});
</script>
<style lang="scss" scoped>
.bg-color{
color: aqua;
}
</style>