小程序——用class类来动态切换样式

关联数据，当课程为必修课时，显示出必修的标签并且下划线为红线，否则不显示标签且下划线为黄色

在课程名称的组件里面插一个text组件，并用wx:if="{{isShow}}"来控制必修组件的显示与否；

<text>课程名称<text class="data" wx:if="{{isShow}}">必修</text></text>

在js文件的data中添加一个名为isShow的布尔函数

data:{
    isShow:true
  }

整个框架view的class=“contrainer”，设置下边框颜色为黄色，为了变换颜色，给view组件再添加一个类show，用三元运算来判断show类的添加class="contrainer {{isShow ? 'show':''}}"。在样式文件中设置show的下边框颜色为红色

.contrainer{
  border-bottom: 5px solid rgb(255, 255, 0);
}
.contrainer.show{
  border-bottom: 5px solid rgb(255, 0, 0);
}

index.wxml

<view class="contrainer {{isShow ? 'show':''}}">
  <text>课程名称<text class="data" wx:if="{{isShow}}">必修</text></text>
  <text>数量：{{count>=1000?count/1000+"k":count}}</text>
</view>

index.js

Page({
  data:{
    count:2200,
    isShow:true
  }
})

index.wxss

..contrainer{
  display: flex;
  flex-direction: column;
  height: 100px;
  border-bottom: 5px solid rgb(255, 255, 0);
  border-top: 1px solid #eee;
  justify-content: space-evenly
}
.contrainer.show{
  border-bottom: 5px solid rgb(255, 0, 0);
}
.contrainer .data{
  color: #ff0000;
  margin-left: 20px;
  font-size: 12px
}

效果图：当“isShow:false”时（左边）；当“isShow:true”（右边）
学习资料：https://www.bilibili.com/video/av80632400?p=23