vue解决menu菜单刷新是不选中的问题思路

最新推荐文章于 2024-11-21 15:20:56 发布

原创最新推荐文章于 2024-11-21 15:20:56 发布 · 728 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

部署运行你感兴趣的模型镜像

<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>

您可能感兴趣的与本文相关的镜像