内容分组输出与对称心形
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);
}
效果图
日志打印
console.log("")