目录
解决问题的过程问题描述做的一些尝试解决方法(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 = "";}});