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

Posted 2023-03-07

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

【英文标题】：How to add different font awesome icons in Vue.js

【发布时间】：2019-06-22 17:23:22

【问题描述】：

我正在建模一个应用程序部分，以显示三个不同的选项卡和三个不同的 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>

如何为不同的标签显示不同的图标？

提前致谢！

【问题讨论】：

根据您的 sn-p，似乎唯一的 active li 将是带有 index = 0 的那个，因为 curentTab 被设置为 0。这是预期的行为吗？

@P3trur0 是活动索引=0，但我想用一个图标设置每个索引值

这里在Codepen.io 我试图重现你的源代码，实际上我看到了三个图标。

@P3trur0 这里显示三个相同的图标，但我想为不同的标签使用不同的图标

【参考方案1】：

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

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

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

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

【讨论】：

显示此错误“数据”选项应该是在组件定义中返回每个实例值的函数