ul li 改变点击的li 样式

LUNA~

已于 2024-07-23 10:22:53 修改

阅读量410

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue css 文章标签：前端 javascript java

于 2024-07-23 10:22:31 首次发布

本文链接：https://blog.csdn.net/CMDN123456/article/details/140616785

vue 同时被 2 个专栏收录

69 篇文章

订阅专栏

css

11 篇文章

订阅专栏

通过判断点击的Index来改变

li点击改变颜色

 <ul> 
   <li  v-for="(item, index) in items" :key="index" class="liStyle" @click="getliData(index,item)" :class="{ active: index == isActive }">
    {{ item.name }}
     </li>
</ul>


/**********js*************/
data() {
    return {
        items:[],
        isActive : 0,
    }
  },


 methods: {
    /**
     * 获取右侧数据
     */
    getliData(val,data){
      console.log(val,'dianji',data);
      this.isActive = val
    },
   
 }
/*********css****************/
.active{
   margin-left: 0%;
   color: #4196de;
   background-color: #fff;
 }
.liStyle:hover{
  margin-left: 0%;
  color: #4196de;
  background-color: #fff;
}

关键步骤：