小程序 获取前几名加样式

很多网站的新闻，前几条消息都不同颜色来展示，来突出。

样式按照自已想法写，我这里就没有贴出来

　　wxml主要代码

    <block wx:for="{{ranking}}" wx:for-index="index">
        <view class='ranking' style='border-bottom: 1rpx solid silver;'>
          <view class='ranking-view'>
              <view class='ranking-font'>     
                <view class='first' wx:if='{{index === 0}}'>
                  <image src='../../../image/jiang.png'></image>
                </view>
                <view class='second' wx:elif='{{index === 1}}'> 
                  <image src='../../../image/jiang1.png'></image>
                </view>
                <view class='third' wx:elif='{{index === 2}}'> 
                   <image src='../../../image/jiang2.png'></image>
                </view>
                <view class='list-id' wx:else >{{item.num}}</view>
              </view>
              <view class='ranking-font'>
                <view class='first' wx:if='{{index === 0}}'>{{item.name}}</view>
                <view class='second' wx:elif='{{index === 1}}'>{{item.name}}</view>
                <view class='third' wx:elif='{{index === 2}}'>{{item.name}}</view>
                <view class='list-id' wx:else >{{item.name}}</view>
              </view>
              <view class='ranking-font'>              
               <view class='first' wx:if='{{index === 0}}'>{{item.integral}}</view>
                <view class='second' wx:elif='{{index === 1}}'>{{item.integral}}</view>
                <view class='third' wx:elif='{{index === 2}}'>{{item.integral}}</view>
                <view class='list-id' wx:else >{{item.integral}}</view>
              </view>
          </view>
        </view>
     </block>

　　js 模拟数据

ranking: [
      {
        num: '1',
        name: '李珊珊',
        integral: '800',
      },
      {
        num: '2',
        name: '余文',
        integral: '562',
      },
      {
        num: '3',
        name: '高富帅',
        integral: '450',
      },
      {
        num: '4',
        name: '李冰冰',
        integral: '130',
      },
      {
        num: '5',
        name: '紫罗兰',
        integral: '125',
      },
      {
        num: '6',
        name: '张丽丽',
        integral: '120',
      },
      {
        num: '7',
        name: '联欢会',
        integral: '110',
      },
      {
        num: '8',
        name: '张算法',
        integral: '100',
      },

   
  
    ],

如图：