vue li列表循环展示效果

学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~\
如果大家喜欢，可以点赞或留言💕 ~~，谢谢大家⭐️⭐️⭐️~

vue li列表循环展示，以及鼠标悬停变色，点击变色的实现

html部分

<div id="bprofitTotal2" style="width: 100%;height: 100%;padding: 44px 44px 40px;">
    <div class='scrollHead'>
        <span>序号</span>
        <span>公司名称</span>
        <span>项目概算</span>
        <span>项目投资完成额</span>
        <span>项目投资完成率</span>
    </div>
    <div class="seamless-warp">
        <ul class="item">
            <li v-for="(item,index) in listData" @click="changelist(item,index)" :class="{activeColor:changeListindex==index}">
                <span>{{index + 1}}</span>
                <span>{{item.pname}}</span>
                <span>{{item.LJTZJH}}</span>
                <span>{{item.LJTZWCE}}</span>
                <span>{{item.TZWCB}}</span>
            </li>
        </ul>
    </div>
</div>

css部分

/* 列表 */
.seamless-warp {
    width: 100%;
    height: calc(100% - 50px); 
    overflow: auto;
}
.item li{
    list-style:none;
    width: 100%;
    height: 36px;
    line-height: 36px;
    background: rgba(0, 255, 255, 0.1);
    border-radius: 25px;
    margin-bottom:5px;
    cursor: pointer;
}
.item li:hover {
    background: red;
}
.activeColor{
    background: red !important;
}
.scrollHead>span,.item>li>span{
    display:inline-block;
    text-align: center;
    font-family: Microsoft YaHei;
    font-size: 14px;
    font-weight: bold;
    color: #7AFFFD;
    width: 20%;
}
.scrollHead>span:nth-child(1),.item>li>span:nth-child(1){
    display:inline-block;
    text-align: center;
    font-family: Microsoft YaHei;
    font-size: 14px;
    font-weight: bold;
    color: #7AFFFD;
    width: 10%;
}
.scrollHead{
    width: 100%;
    height: 36px;
    line-height: 36px;
    margin-bottom:5px !important;
    background: rgba(0, 255, 255, 0.1);
    border-radius: 25px;
}
.item>li>span:nth-child(3) {
    color: #E099FF;
}
.item>li>span:nth-child(4) {
    color: #49FFB4;
}
.item>li>span:nth-child(5) {
    color: #FCD32D;
}

/* 滚动条样式 */
.seamless-warp::-webkit-scrollbar {
    width: 4px;
    padding: 30px 0 30px;
}
.seamless-warp::-webkit-scrollbar-track {
    /* background-color:grey; */
    background-color:transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
}
/* 滚动条的设置 */
.seamless-warp::-webkit-scrollbar-thumb {
    /* background-color:#072764; */
    background-color:transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius:2em;
}

data数据：

data(){
    return {
        changeListindex: 0,//默认选中第一个
        listData: [
                {
                    pname: 'XX二级公司',
                    LJTZJH: 123456,
                    LJTZWCE: 1235676,
                    TZWCB: '80%',
                },
                {
                    pname: 'XX二级公司2',
                    LJTZJH: 123456,
                    LJTZWCE: 1235676,
                    TZWCB: '80%',
                },
                {
                    pname: 'XX二级公司3',
                    LJTZJH: 123456,
                    LJTZWCE: 1235676,
                    TZWCB: '80%',
                },
                {
                    pname: '项目4',
                    LJTZJH: 123456,
                    LJTZWCE: 1235676,
                    TZWCB: '80%',
                },
                {
                    pname: '项目5',
                    LJTZJH: 123456,
                    LJTZWCE: 1235676,
                    TZWCB: '80%',
                },
                {
                    pname: '项目6',
                    LJTZJH: 123456,
                    LJTZWCE: 1235676,
                    TZWCB: '80%',
                }
            ],
    }
}

在methods里增加的方法

methods: {
    changelist(item, index) {
        this.changeListindex = index;
    },
}

效果图