vue实现点击当前标签高亮效果【推荐】

在 Vue 中实现点击当前标签高亮的效果是非常实用的功能，对于用户体验的提升大有裨益。下面，我将详细解释如何实现这一功能。

我们需要在 Vue 实例的 data 中定义将要渲染的数据以及一个标识当前高亮标签的变量。例如：

```javascript

data() {

return {

wpList: [

{ name: '食品饮料' },

{ name: '鲜花' },

{ name: '蛋糕' },

{ name: '水果生鲜' },

{ name: '服装鞋帽' },

{ name: '其它' }

],

activeName: '' // 当前高亮的标签名

};

}

```

接下来，定义 CSS 类名以区分高亮的标签。例如：

```css

.highlight { / 高亮标签的样式 /

background-color: fd7522; / 背景色 /

border: 1px solid fd7522; / 边框颜色 /

color: fff; / 文字颜色 /

}

```

然后，在模板中动态渲染按钮数据，并为每个按钮添加点击事件。根据 `activeName` 的值动态地给按钮添加 `.highlight` 类名。使用 Vue 的 `v-for` 指令进行列表渲染，并用 `:class` 绑定来决定哪个按钮应该被高亮显示。例如：

```html

v-for="item in wpList"

:key="item.name"

:class="{ 'highlight': activeName === item.name }"

@click="setActive(item.name)">{{ item.name }}

```

在 Vue 实例的 methods 中定义点击事件的处理函数 `setActive`。这个函数的作用是设置 `activeName` 为被点击的标签的 `name`。例如：

```javascript

methods: {

setActive(name) {

this.activeName = name; // 设置当前高亮的标签名

}

}

```当某个按钮被点击时，调用 `setActive` 函数并将该按钮对应的 `name` 作为参数传入，这样 `activeName` 就会更新为被点击的按钮的 `name`，进而使得该按钮获得高亮显示。至此，点击当前标签高亮的效果就实现了。当其他按钮被点击时，同样的逻辑会使其获得高亮显示，而之前的按钮则失去高亮状态。这种交互方式极大地提升了用户体验。希望这个详细的解释对大家有所帮助。如果有任何疑问或需要进一步了解的地方，请随时联系我。也感谢大家对狼蚁SEO网站的支持！以上就是长沙网络推广为大家分享的 Vue 实现点击当前标签高亮效果的方法。