循环列表默认选中第一条(变颜色) 点击某一条(变颜色)

最新推荐文章于 2023-09-05 14:32:10 发布

愿祖国繁荣昌盛user

最新推荐文章于 2023-09-05 14:32:10 发布

阅读量981

点赞数 8

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_49875821/article/details/125218300

版权

本文介绍如何使用Vue.js进行列表渲染，通过`v-for`指令遍历数组并显示列表项，同时结合`:class`和`@click`实现元素高亮及点击事件。在点击事件中，利用索引来切换列表项的焦点状态，实现选中效果。此外，还展示了动态改变元素样式的技巧。

摘要由CSDN通过智能技术生成

1.先循环数组实现列表展示

2.添加点击事件

<div class="listTop"
    :class="{ 'tree-btn-box-hover' : item.focus }"
    v-for="(item, index) in arrayList"
    :key="index"
    @click="changeName(item.id, index)">
{{ item.name }}
</div>

样式颜色的值 (动态)

.tree-btn-box-hover { background-color: #3D8AF2 !important; color: #fff !important; }

3.数组赋值阶段添加一个 focus 默认false 然后再循环默认第一条的 focus 为 true

arrayList.value.forEach((item: any) => {
          item.focus = false
        })
for (let i = 0; i < arrayList.value.length; i++) {
          arrayList.value[0].focus = true
        }

4.点击事件的时候要把下标带上通过 index 和 i 对比选中的为 true 否则为 false

const changeName = async (id: any, index: any) => { // 点击列表某一条
      for (let i = 0; i < arrayList.value.length; i++) {
        index === i ? arrayList.value[i].focus = true : arrayList.value[i].focus = false
      }
    }