员工信息分组与心形艺术：性别、职务与工龄展示-CSDN博客

本文链接：https://blog.csdn.net/xingyao007yyqx/article/details/124331454

本文介绍了如何使用JavaScript代码按性别、职务和工龄对20名公司员工信息进行分组输出，并展示了如何创建一个对称心形图形。通过实例展示了数据分组和CSS样式实现的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内容分组输出与对称心形

1.内容分组输出

对一公司员工（20名）信息按性别、职务、工龄（10年一组）等分组输出

关键代码

按性别：

<view>男员工</view>
  <view wx:for="{{data}}" wx:key="id">
    <block wx:if='{{item.gender=="男"}}'>
      <view style="font-size: small;">工号:{{item.id}} 姓名:{{item.name}} 年龄:{{item.age}} 职务:{{item.post}}</view>
    </block>
  </view>

按职务：

<view>运营</view>
<view wx:for="{{data}}" wx:key="id">
  <block wx:if='{{item.post =="运营"}}'>
    <view style="font-size: small;">工号:{{item.id}} 姓名:{{item.name}} 年龄:{{item.age}} 职务:{{item.post}}</view>
  </block>
</view>

按工龄：
0-10

<view>工龄0-10</view>
 <view wx:for="{{data}}" wx:key="id">
    <block wx:if='{{item.age >= 20 && item.age<= 30}}'>
      <view style="font-size: small;">工号:{{item.id}} 姓名:{{item.name}} 年龄:{{item.age}} 职务:{{item.post}}</view>
    </block>
  </view>

10-20

<block wx:if='{{item.age >30 && item.age <= 50}}'>

20-30

<block wx:if='{{item.age > 50}}'>

data部分

在js中自定义一些数据，例如：

data: {
    data:[
      {
       id:"01", name:"张三", gender:"男", age:"28", post:"运营"
      }
    ],
 },

效果图

在这里插入图片描述

2.对称心形

关键代码

.container{
  margin: 0;
}
.heart{
  position: relative;
  width: 350rpx;
  height: 350rpx;
  background-color: #ddd ; 
  margin: 60px auto;
}
.heart:before{
  content: "";
  position: absolute;
  top: 80rpx;
  left: 100rpx;
  width: 100rpx;
  height: 160rpx;
  background-color: red;
  border-radius: 50rpx 50rpx 0rpx 0rpx;
  
  transform: rotate(-45deg);
}

.heart:after{
  content: "";
  position: absolute;
  top: 80rpx;
  left: 100rpx;
  width: 100rpx;
  height: 160rpx;
  background-color: red; 
  border-radius: 50rpx 50rpx 0rpx 0rpx;
  transform: translate(43rpx) rotate(45deg);
}