效果图是这样的:
1.该功能使用了双层循环请求数据
2.实现了折叠功能
3.利用三元表达式隐藏了多余样式
4使用css样式完成了文字变色
5点击切换图片
【注释】文章最下面有该功能所有代码
<template>
<div class="box">
<div v-for="(v, index) in sum" :key="index" class="box2">
<div class="box3">
<!-- 左侧样式 -->
<div class="iconTop" @click="fn(v)">
<!--点击图片折叠数组 并切换图片 -->
<img :src= "v.showContent?require('../../../assets/img/SysManger/doubleleft.png'):require('../../../assets/img/SysManger/Dy.png')" alt=""/>
</div>
<div class="skyWire" v-if="index == 0 ? false : true"></div><!--左边样式 判断删除第0个下标 -->
<!-- 右侧数据 -->
<p> {{ v.date }} {{ v.time }} {{ v.over }}</p>
<span> 观看人数:{{ v.view }}</span>
<span>点赞人数:{{ v.praise }}</span>
<span>转发人数:{{ v.transmit }}</span>
<span>评论人数:{{ v.commet }}</span>
</div>
<div v-for="(vite, i) in v.sn" :key="i" class="box4">
<div class="box5" v-show="v.showContent">
<!-- v-if="seen" -->
<!-- 左侧样式 -->
<div class="skyWire"></div>
<div class="dot"></div>
<!-- 右侧数据 -->
<p>{{ vite.a }}{{ vite.b }}</p>
<span>观看人数:{{ vite.c }}</span>
<span>点赞人数:{{ vite.d }}</span>
<span>转发人数:{{ vite.e }}</span>
<span>评论人数:{{ vite.f }}</span>
<!-- er层循环高度 -->
<div style="height: 64px"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
sum: [
{
date: "2020年11月24日",
time: " 10:00:20 ",
over: "第一天",
view: "5000",
praise: "5000",
transmit: "5000",
commet: "5000",
showContent:false,
sn: [
{
a: "2020年11月24日",
b: " 10:00:20 ",
c: "5000",
d: "5000",
e: "5000",
f: "5000",
},
{
a: "2020年11月24日",
b: " 10:00:20 ",
c: "5000",
d: "5000",
e: "5000",
f: "5000",
},
],
},
{
date: "2020年11月24日",
time: " 10:00:20 ",
over: "第二天",
view: "5000",
praise: "5000",
transmit: "5000",
commet: "5000",
showContent:false,
sn: [
{
a: "2020年11月24日",
b: " 10:00:20 ",
c: "5000",
d: "5000",
e: "5000",
f: "5000",
},
{
a: "2020年11月24日",
b: " 10:00:20 ",
c: "5000",
d: "5000",
e: "5000",
f: "5000",
},
],
},
{
date: "2020年11月24日",
time: " 10:00:20 ",
over: "第三天",
view: "5000",
praise: "5000",
transmit: "5000",
commet: "5000",
showContent:false,
sn: [
{
a: "2020年11月24日",
b: " 10:00:20 ",
c: "5000",
d: "5000",
e: "5000",
f: "5000",
},
{
a: "2020年11月24日",
b: " 10:00:20 ",
c: "5000",
d: "5000",
e: "5000",
f: "5000",
},
],
},
],
};
},
methods: {
// 元素点击显示隐藏 折叠
fn(v) {
v.showContent = !v.showContent;
},
},
};
</script>
<style scoped lang="less">
//css伪类样式 非常实用
.box2:first-child .box3:first-child p,.box2:first-child .box3:first-child span {
color: red;
}
.box2:last-child .box4:last-child p,.box2:last-child .box4:last-child span{
color: red;
}
.box2 {
font-size: 16px;
}
.box3 {
font-size: 14px;
color: #262626;
position: relative;
padding-bottom: 65px;
p {
font-size: 16px;
margin-bottom: 16px;
}
}
.box4 {
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
position: relative;
p {
font-size: 16px;
margin-bottom: 16px;
}
}
.skyWire {
position: absolute;
// position: relative;
left: -35px;
top: -84px;
height: 100%;
// height: 86px;
// position: absolute;
bottom: 18px;
width: 2px;
border-left: 2px solid #e4e7ed;
}
.skyWir {
position: absolute;
left: -35px;
top: -84px;
height: 100%;
bottom: 18px;
width: 2px;
border-left: 2px solid #e4e7ed;
}
.iconTop {
position: relative;
right: 46px;
top: 32px;
z-index: 99;
}
.dot {
position: absolute;
left: -39px;
top: 22px;
width: 8px;
height: 8px;
background: #ff8000;
border-radius: 20px;
border: 1px solid #ffffff;
z-index: 99;
}
.active {
display: none;
}
</style>