要使用 Vue 3 模拟 Mac 程序坞（Dock）鼠标悬停动画，你可以使用 Vue 的过渡效果和动态类绑定来实现。
<div id="app"> <div class="dock"> <div class="dock-item" v-for="(item, index) in dockItems" :key="index" :class="{ active: item.active }" @mouseover="hoverItem(index)" @mouseout="unhoverItem(index)" > {{ item.name }} </div> </div> </div>
CSS 代码：
.dock { display: flex; justify-content: center; background-color: #f0f0f0; padding: 10px; } .dock-item { padding: 10px; cursor: pointer; } .dock-item.active { background-color: #c0c0c0; color: #fff; }
Vue 代码：
const app = Vue.createApp({ data() { return { dockItems: [ { name: 'Safari', active: false }, { name: 'Mail', active: false }, { name: 'Calendar', active: false }, { name: 'Notes', active: false } ] }; }, methods: { hoverItem(index) { this.dockItems[index].active = true; }, unhoverItem(index) { this.dockItems[index].active = false; } } }); app.mount('#app');
在上述代码中，我们使用 Vue 3 创建了一个 Vue 应用，并定义了一个 dockItems 数据数组，其中每个 Dock 项都包含名称和活动状态的信息。
在 HTML 中，我们使用 Vue 的指令 v-for 循环渲染 Dock 项，并通过动态类绑定 :class 来根据 active 属性来切换项的样式。当鼠标悬停时，调用 hoverItem 方法将 Dock 项的 active 属性设置为 true，从而改变项的样式。当鼠标离开时，调用 unhoverItem 方法将 Dock 项的 active 属性设置为 false，还原项的样式。
请确保在 HTML 文件中引入了 Vue.js 库，并将以上代码放置在正确的位置。
这样，当你将代码复制到 HTML 文件中并在浏览器中打开时，就可以看到 Vue 3 模拟 Mac 程序坞鼠标悬停动画的效果了。
