Vue 点击li动态改变元素样式

一、问题描述

为了实现点击侧边栏中一项，改变当前选中项的背景图片效果。原本使用循环遍历清除样式再单独添加样式可以实现，但是总感觉会有更简洁的方式实现。今天找到了方法，故而小小记录一下。

template内容

<ul>
  <li class="siderBarItem"
    v-for="item in sideBarItems"
    :key="item.value" 
    :value="item.value" @click="goToProductOption(item.value)"
  >
    <span>{{item.label}}</span>
  </li>
</ul>

二、原来方法

其中 unSelectedBgi 、selectedBgi已经通过import方式引入当前vue组件中。
原来是通过获取到所有的li元素，循环遍历。先将所有li的背景图片修改为未选中的，然后设置当前选中的背景图片。感觉有些繁琐。代码也不简洁

代码如下（示例）：

goToProductOption(itemVal){
  // 滚动到某个元素
  document.getElementById(itemVal).scrollIntoView({
    block: 'start',
    behavior: 'smooth'
  })
  // 设置背景图片
  let items = document.getElementsByClassName('siderBarItem')
  // 将所有li的背景图片修改为未选中的
  Array.from(items).forEach(item => {
    item.style.background = `url(${unSelectedBgi})`
  })
  // 修改当前选中的背景图片
  Array.from(items).forEach(item => {
    if(item.attributes['value'].value === itemVal){
      item.style.background = `url(${selectedBgi})`
    }
  })
},

新方法

1.data中定义变量

selectedItemVal: '0', // 侧边栏选中值,默认是第一个

2. v-bind 与class 动态绑定

在li中新增以下代码段：

:class="{selectedPic: selectedItemVal === item.value}"

绑定selectedPic类。当选中的值与当前li的值一致时，为当前的li新增selectedPic类

3. 修改点击事件的代码

关键代码：this.selectedItemVal = itemVal

goToProductOption(itemVal){
  // 滚动到某个元素
  document.getElementById(itemVal).scrollIntoView({
    block: 'start',
    behavior: 'smooth'
  })
  // 设置背景图片
  this.selectedItemVal = itemVal
},

4. 定义selectedPic的样式

/* li的默认样式，未选中状态 */
.siderBarItem{
  font-size: 15px;
  color: #7e7f7f;
  padding-left: 35px;
  height: 50px;
  line-height: 50px;
  background: url('../../assets/images/left_nav_bg.png');
}
/*选中的样式*/
.selectedPic{
  background: url('../../assets/images/left_nav_bg_pre.png');
}

这样就可以实现同样的效果啦，代码还简洁不少

总结

主要用到的知识点是：class的动态绑定和根据索引或者唯一值来判断是否为当前元素添加class属性

链接

最后附上官方讲解地址：
Class与style绑定：https://cn.vuejs.org/v2/guide/class-and-style.html

如果也遇到同样的问题，希望这篇文章给你一些灵感。