javascript - 如何在 Vue.js 中添加不同字体的很棒的图标

Question

我正在对一个应用程序部分进行建模，以显示三个不同的选项卡以及三个不同的 Font Awesome 图标。到目前为止，选项卡的设置方式如下，应用程序在选项卡中仅显示一个图标:

   <div class="tab">

    <ul class="nav nav-tabs" role="tablist">
           <li v-for="(tab,index) in tabs" :class="{active : curentTab===index}" 
            @click="curentTab=index">
         <a href="#">
       <i class="fa fa-bullhorn" style="width:auto" aria-hidden="true"></i> {{tab}}
         </a></li>
      </ul>

 </div>

下面是用于对选项卡进行建模的 Vue 应用程序片段。

   <script>
   data() {
    return {
      curentTab:0,
      tabs:['Tab1','Tab2 ','Tab3']
    }
  }
  </script>

如何为不同的选项卡显示不同的图标？

提前致谢!

Answer 1

要使用特定图标呈现每个选项卡，您可以通过为每个选项卡引入不同的图标来修改数据模型。例如，像这样:

tabs:[
  {label: 'Tab1', icon:'smile'},
  {label: 'Tab2', icon:'bullhorn'},
  {label: 'Tab3', icon:'heart'}
]

此外，您还必须通过相应地绑定(bind) i CSS 类来修改您的模板。为此，您可以:

1. 引入一个 Vue 方法，返回与 FontAwesome 对应的正确 CSS 类，例如:

    methods: {
         faClass(icon) {
            return `fa fa-${icon}`;
          }
        }

在您的模板中调用这个新方法，如下所示:

<i :class="[faClass(tab.icon)]" style="width:auto" aria-hidden="true">

在这里您可以看到 class 现在如何通过 Vue 本身进行绑定(bind)。

<小时/>

因此，回到您的示例，您将拥有:

HTML 模板

<div id='app'>
  <ul class="nav nav-tabs" role="tablist">
           <li v-for="(tab,index) in tabs" :class="{active : curentTab===index}" 
            @click="curentTab=index">
         <a href="#">
       <i :class="[faClass(tab.icon)]" 
           style="width:auto" 
           aria-hidden="true"></i> {{tab.label}}
         </a></li>
      </ul>
</div>

Vue实例

    ...
    data: function() {
       return {
        curentTab:0,
        tabs:[
         {label: 'Tab1', icon:'smile'},
         {label: 'Tab2', icon:'bullhorn'},
         {label: 'Tab3', icon:'heart'}
       ]
      }
     },
      methods: {
        faClass(icon) {
          return 'fa fa-'+icon;
        }
      }
    ...

检查这个CodePen看看它的实际效果。