微信小程序for循环的使用

下列是循环主体

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

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

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

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

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

  <block wx:for="{{courseItems}}" wx:key="index" >
  <view class="courseList {{item.isstar ? 'item.isstar' : ''}}">
    <image class="teacherPicture" src="{{item.courseImage}}" />
    <view class="item.teachingContent">
      <text class="title">Python-{{item.title}}</text>
      <text class="teacher">讲师：{{item.teacher}}
        <text wx:if="{{item.isstar}}" class="star">星级讲师</text>
      </text>
      <text class="students">学习人数：{{item.course >= 1000 ? item.course/1000+"k"+"人":item.course+"人"}}</text>
     </view>
   </view>
  

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这两个特定名字可以自定义 如以下代码：
 <block wx:for="{{courseItems}}" wx:key="index" wx:for-item="dom" wx:for-index="number">