使用stylus实现根据后台传递数据不同来显示不同图标。

mixin.styl:

bg-image($url)//默认2x图，dpr为3则使用3x图
  background-image: url($url+"@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(-min-device-pixel-ratio: 3)
    background-image: url($url+"@3x.png")

header.vue:

<template>
        <div v-if="seller.supports" class="supports">//异步请求，需要判断数据是否传递到。否则报错undefined
          <span class="icon" :class="classMap[seller.supports[0].type]"></span>
          <span class="text">{{seller.supports[0].description}}</span>
        </div>
</template>

<script type='text/ecmascript-6'>
export default {
  props: {
    seller: {
      type: Object
    }
  },
  created () {//created钩子函数，用于组件实例创建完成，属性已经绑定，但是DO还未生成，$el属性还不存在时。给classMap数组赋值,根据数组下标不同来显示不同的class，从而显示不同的图标。
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']//classmap数组实现数组下标值与活动类型的一一映射
  }
</script>

<style lang='stylus'>
@import '../../common/stylus/mixin.styl'//使用前需要导入。
      .supports
        margin-bottom: 2px
        .icon
          display: inline-block
          vertical-align: top
          width: 12px
          height: 12px
          background-size: 12px 12px
          background-repeat: no-repeat
          &.decrease
            bg-image('decrease_1')
          &.discount
            bg-image('discount_1')
          &.guarantee
            bg-image('guarantee_1')
          &.invoice
            bg-image('invoice_1')
          &.special
            bg-image('special_1')
        .text
          line-height: 12px
          font-size: 10px
          margin-left: 4px
          background-color: rgba(0, 0, 0, 0.2)