javascript - 使用 switch 语句更改图标图像

Question

根据通知类型，我需要更改此通知的图标图像。通知分为三种类型。

通知类型:

• answer_created
• user_subscribed
• 已选择答案

图标图像放置在 span 标签的 i 标签内。我不想使用任何条件，而是想使用 switch 语句来执行此操作。我该怎么做？

这是我的代码:

<div class="media g-mb-20">
<span v-bind="changeIcon" class="u-icon-v3 g-rounded-50x g-mt-2 g-mr-15 g-height-40 g-width-40 g-bg-gray-light-v5">
  <i class="icon-bubble g-font-size-18 g-color-gray-light-v1"></i>
</span>
  <a href="#"
     class="media-body g-brd-around g-brd-gray-light-v4 g-py-10 g-px-15 g-bg-gray-light-v5--hover u-link-v5 g-rounded-3">
    <p class="mb-0 g-font-size-16 g-color-gray-dark-v3">
      <span class="g-font-stag-medium">{{ item.message }}</span>
    </p>
  </a>
</div>

我想我需要借助 v-bind 指令将函数绑定(bind)到带有图标的范围。然后我将 switch 语句添加到该函数中。

Answer 1

您不需要绑定(bind)任何东西，只需使用正确的类即可。定义你的图标如下:

<i class="g-font-size-18 g-color-gray-light-v1" :class="switchIcon"></i>

然后定义一个新的计算属性:

computed: {
  switchIcon () {
    switch (this.notification_type) {
      case 'some_type':
        return 'icon-bubble'
      default:
        return ''
    }
  }
}

这样，当 notification_type 等于 some_type 时，您的图标将呈现为:

<i class="icon-bubble g-font-size-18 g-color-gray-light-v1"></i>