Vue——按钮名字点击来回切换

### Vue 实现鼠标悬停或点击时元素高亮效果 在 Vue 中可以利用事件绑定机制来处理鼠标的 `mouseover` 和 `mouseout` 或者 `click` 事件，从而改变目标元素的状态属性并影响其样式。下面是一个简单的例子说明如何创建这样的交互功能[^1]。 #### HTML 结构与初始设置 首先定义好页面上的基本结构，在此案例中假设有一个按钮作为要被操作的对象： ```html <div id="app"> <button @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" :class="{ active: isActive }">Hover Me</button> </div> ``` 这里使用了Vue特有的指令语法：`@event="handler"` 来监听特定类型的用户输入；`:class` 动态绑定了一个类名给这个组件，当条件满足时会自动应用该CSS类[^2]。 #### JavaScript 部分 (Vue 组件逻辑) 接下来编写相应的JavaScript代码片段用于控制上述HTML中的行为变化: ```javascript new Vue({ el: '#app', data() { return { isActive: false, // 控制是否激活状态，默认关闭 } }, methods:{ handleMouseEnter(){ this.isActive = true; // 当鼠标进入区域时开启高亮模式 }, handleMouseLeave(){ this.isActive = false; // 当鼠标离开后取消高亮 } } }) ``` 这段脚本通过修改 `isActive` 的布尔值来回切换元素的视觉表现形式。每当触发对应的事件处理器函数(`handleMouseEnter`, `handleMouseLeave`)就会更新数据模型里的字段进而引起视图层的变化[^3]。 #### CSS 样式表单 最后一步就是为 `.active` 类指定具体的外观特性啦！ ```css .active{ background-color: yellow; } ``` 这样就完成了一个完整的基于Vue框架下的简单示例程序，实现了鼠标经过某个DOM节点时让其变色的功能[^4]。 对于想要实现点击之后持续保持选中样式的场景，则只需替换掉上面提到过的两个方法名称以及它们内部的操作即可——即把 `@mouseenter/@mouseleave` 改成 `@click` 并相应调整业务逻辑部分[^5]。