使用switch语句更改图标图像

Question

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

notifications_type：

• answer_created
• 用户预订
• answer_selected

图标图像放置在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指令将函数绑定到带有图标的范围。然后，我将switch语句添加到此函数。

Answer 1

您不需要绑定任何东西，只需要使用正确的类即可。这样定义您的图标：

<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>