如何在 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 应用程序 sn-p 对选项卡进行建模。

   <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'}
]

此外，您必须通过相应地绑定 i CSS 类来修改您的 template。为此，您可以：

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

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

1. 在template 中调用这个新方法，如下所示：

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

在这里您可以看到class 现在是如何通过 Vue 本身绑定的。

---

所以，回到您的示例，您将拥有：

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 以查看它的实际效果。