导航栏选中态
2026/5/23 4:14:31 网站建设 项目流程

2️⃣ 标准实现方式

data

data() { return { activeMenu: 'workbench' } }

template

<div :class="{ active: activeMenu === 'workbench' }"></div> <div :class="{ active: activeMenu === 'ajtz' }"></div>

methods

this.activeMenu = 'ajtz';

CSS

.workbench.active { border-bottom: 2px solid #fff; }

易错点

错误后果
data 里没定义activeMenuclass 永远不生效
只写 hover点击后无法保持
div 是 inlineborder-bottom 不显示

时间 & Date 相关基础点(补充)

Date.now()/getTime()

new Date().getTime() === Date.now()

✔ 都是毫秒时间戳


Infinity(无穷大)

let minDays = Infinity;

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询