一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。
学习过程中将笔记整理跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
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;
},
}
效果图
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
