vue-点击标签-背景变色

思路：

         1、 定义一个统一的类名。

         2、通过for循环，遍历元素

         3、通过点击事件先清除全部标签的样式，再给指定标签添加样式

 

代码如下：

            

 <ul>
          <li class="active link" id="cnac1">储能1</li>
          <li class="active" id="cnac2">储能2</li>
          <li class="active" id="cnac3">储能3</li>
          <li class="active" id="cnac4">储能4</li>
          <li class="active" id="cnac5">储能5</li>
          <li class="active" id="cnac6">储能6</li>
        </ul>

            

 

mounted() {
    this.CnChart()
    //  挂载方法
  },
  methods: {
    //  储能
    CnChart() {
      const actives = document.querySelectorAll('.active')
      // 获取全部元素
      console.log(actives)// 控制台输出元素
      for (let i = 0; i < actives.length; i++) {
        actives[i].onclick = () => {
          console.log(i) // 输出对应的索引值
          for (let i = 0; i < actives.length; i++) {
            actives[i].classList.remove('link')
          //  清除样式
          }
          actives[i].classList.add('link')
        //  添加样式
        }
      }
    }
}

 

            

 

 

                 

       样式：

ul{
        display: flex;
        justify-content: space-around;
        /*border: white 1px solid;*/
        margin-top: -10px;
        li{
          list-style: none;
          color: white;
          margin-left: -30px;
          background: #000000;
          /*border: #b1b639 1px solid;*/
          border-radius: 5px;
          cursor: pointer;
        }
        li:hover{
          background: #ff006f;
        }
        .link{
          background: #ff006f;
        }
      }