目录

解决问题的过程问题描述做的一些尝试解决方法（ref）代码片

解决问题的过程

该小文本着记录在工作中学习和解决问题的思路，并非最佳方式。

问题描述

在使用Vue+ElementUI开发时，遇到一个需求，点击左边栏卡片时，改变卡片字体颜色和背景颜色，并调用接口，在右边展示数据。

做的一些尝试

用hover，鼠标移动到位置时，可以改变颜色；用foucs，没有效果，实际上这个方法在鼠标点击其他位置时，效果也会消失，不符合需求；用动态绑定:style,绑定在el-card元素上，左边所有的卡片都会改变颜色，不符合需求；

解决方法（ref）

代码片

// 处理方法let lefCard = [];let click_index = index; //点击时获取的索引位置// let elem = this.$refs.leftCard[index].$el;lefCard = this.$refs.leftCard; //拿到所有的元素lefCard.forEach((item, index) => {if (click_index == index) {//对比索引，这样就不会所有的元素都修改了item.$el.style.background = "#5ee2b2";item.$el.style.color = "#fff";} else {item.$el.style.background = "";item.$el.style.color = "";}});