微信小程序开发教程：三元运算符动态添加类属性，根据用户的选择改变CSS样式

本次以实战案例为大家讲解：

有如下微信小程序代码：

<view class="all" data-index="{
   
   {index}}" bindtap="showAll">{
   
   {item.showAll ? '▲收起内容▲' : '▼点击查看所有专业▼'}}</view>

若要在显示"▲收起内容▲"时修改底色，可以通过动态添加一个CSS类来控制样式。以下是一个示例代码，展示了如何在WXML中使用条件渲染来动态添加类，并在WXSS中定义这个类的样式。

首先，在WXSS（或者你的样式文件中）定义两个类，一个用于正常状态，一个用于修改底色的状态：

/* wxss文件 */
.all {
  /* 其他样式 */
}

.all-collapse {
  background-color: #yourColor; /* 替换成你想要的颜色 */
  /* 其他想要修改的样式 */
}

然后，在WXML中使用三元运算符动态添加类：

<!-- wxml文件 -->
<view class="all {
   
   {item.showAll ? 'all-collapse' : ''}}" data-index="{
   
   {index}}" bindtap="showAll">
  {
   
   {item.showAll ? '▲收起内容▲' : '▼点击查看所有专业▼'}}
</view>

在这个例子中，当item.showAll为true时，all-collapse类将被添加到<view>元素上，从而改变其底色。当item.showAll为false时，只有all类会被应用，all-collapse类则不会被添加。

确保在你的WXSS文件中定义了.all-collapse类，并且替换了#yourColor为你想要的颜色值。这样，当点击事件触发，item.showAll的值发生变化时，视图的底色也会相应地发生变化。