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

本文主要是介绍使用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'//使用前需要导入。.supportsmargin-bottom: 2px.icondisplay: inline-blockvertical-align: topwidth: 12pxheight: 12pxbackground-size: 12px 12pxbackground-repeat: no-repeat&.decreasebg-image('decrease_1')&.discountbg-image('discount_1')&.guaranteebg-image('guarantee_1')&.invoicebg-image('invoice_1')&.specialbg-image('special_1').textline-height: 12pxfont-size: 10pxmargin-left: 4pxbackground-color: rgba(0, 0, 0, 0.2)