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

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

引入Vue方法，该方法返回与FontAwesome对应的正确CSS类，例如：

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

在您的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即可查看其运行情况。

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

1 个答案: