微信小程序for循环的使用

下列是循环主体

• 微信for遍历通过一个特定的变量名item来获取每个元素

• item.xxx 中的xxx代表数组某个元素中的具体的key 翻译为白话就是 item的xxx

• 用以下代码解释为 item的title或者 item的teacher

• 还可以通过index这个特定名字来获取每个元素的索引值

• item 和 index这两个特定名字还可以自定义 详情见文章末尾：

  
  
  
  
  Python-{{item.title}}
  讲师：{{item.teacher}}
  星级讲师
  
  学习人数：{{item.course >= 1000 ? item.course/1000+"k"+"人":item.course+"人"}}
  
  
  

WXSS样式

.courseList{
background-color: rgb(167, 161, 161);
display: flex;
border-bottom: red solid 10rpx;
}
// 微信WXSS中【不允许出现注释】，此注释只应用于博客
// 以下两个类选择器之间没有空格表示【并且】关系，
// 表示这两个类名同时存在的时候 该类名所出现处的样式为以下代码所定义的样式

.courseList.isstar{
border-bottom: rgb(235, 208, 11) solid 10rpx;
}
.courseList .teacherPicture{
border-radius: 10rpx;
margin: 20rpx;
height: 160rpx;
width: 260rpx;
}
.courseList .teachingContent{
padding: 20rpx;
font-size: 30rpx;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.courseList .teachingContent .title{
font-weight: bold;
font-size: 40rpx;
}
.courseList .teachingContent .teacher{
color: rgb(116, 234, 238);
}
.courseList .teachingContent .students{
color: red
}
.star{
margin-left: 15rpx;
font-size: 35rpx;
font-weight: 400;
color: rgb(245, 221, 43);
}

微信JS的数据

data: {
courseItems:[
{
isstar:false,
courseImage:"/assets/images/2.jpg",
title: "玩转微信",
teacher: "讲师美女",
course: "5500",
},
{
isstar:true,
courseImage:"/assets/images/3.jpg",
title: "玩转微信",
teacher: "天使讲师",
course: "66500",
},
{
isstar:false,
courseImage:"/assets/images/2.jpg",
title: "玩转微信",
teacher: "讲师美女",
course: "5500",
},
{
isstar:true,
courseImage:"/assets/images/3.jpg",
title: "玩转微信",
teacher: "天使讲师",
course: "66500",
}
]
},

// item 和 index这两个特定名字可以自定义 如以下代码：