小程序 wx:if 条件选择器案例

小程序 wx:if 条件选择器案例

具体的文档我就不在啰嗦了下面是我写的一大个例子：.
场景需求：按照后台传 but 的字段，改变对应数据的css样式，

				**根据字段改变前面的图标，是同理，**

index.wxml

注意这个地方wx:if="{{item.but === ‘c’ }}" 是全等 = = =

    <view  wx:for="{{text}}">
       <view wx:if="{{item.but === 'c' }}">
        	<view class="bg_black">{{item.ss}}:</view>
      </view>
      <view  wx:elif="{{item.but === 'a' }}">
       	 	<view class="bg_red">{{item.ss}}</view>
      </view>
      <view  wx:elif="{{item.but === 'b' }}">
        	<view class="bg_green">{{item.ss}}</view>
      </view>
   </view>

index.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    text: [
   	  { ss: "第一条数据---111", but:"a"},
      { ss: "第二条数据---222", but: "b" },
      { ss: "第三条数据---333", but: "c" },
      { ss: "第四条数据---444", but: "c" },
      { ss: "第五条数据---555", but: "a" },
      { ss: "第六条数据---666", but: "b" }
      ]
  },

index.wxss
样式写的很随意，主要是懒 得整理，

.bg_black {
  height: 60rpx;
  background:#000;
  border-bottom: 1px solid #2b2e33;
  margin: 10rpx;
  color: #fff;
  opacity: 0.4;

}

.bg_red {
  height: 80rpx;
  background:#000;
  border-bottom: 1px solid #2b2e33;
  margin: 10rpx;
   color: #fff;
   opacity: 0.6;
}
.bg_green{
 height: 50rpx;
 background:#000;
  border-bottom: 1px solid #2b2e33;
  margin: 10rpx;
   color: #fff;
   opacity: 0.8;
}

本来是这样的:

处理完是这样的

后台给了接口后，可以吧data的数据换一下，就OK了；