javascript - 如何在 Vue.js 中添加不同的字体真棒图标
问题描述
我正在建模一个应用程序部分,以显示三个不同的选项卡和三个不同的 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>
如何为不同的标签显示不同的图标?
提前致谢!
解决方案
要使用特定图标呈现每个选项卡,您可以通过为每个选项卡引入不同的图标来修改数据模型。例如,像这样:
tabs:[
{label: 'Tab1', icon:'smile'},
{label: 'Tab2', icon:'bullhorn'},
{label: 'Tab3', icon:'heart'}
]
此外,您必须通过相应地template
绑定i
CSS 类来修改您的。为此,您可以:
- 引入一个 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以查看它的实际效果。
推荐阅读
- php - Remove Child 不包含属性值
- firebase - firestore/permission-denied - 调用者没有执行指定操作的权限。] 在 React Native
- python - drf-yasg 涵盖对以下实施的标准 api 响应的所有响应
- python - 无法在 Kivy Python for windows 中找到任何有价值的窗口提供程序
- javascript - jsPDF jQuery.Deferred 异常:r[o] 未定义
- php - PHP - 如何在函数数组中使用配置文件变量?
- flutter - TabBarView 中的 Flutter Futurebuilder 在选项卡之间切换时在初始应用程序加载后不会触发未来?
- angular - 在 Node(restify) 中防止 CSRF 攻击的最佳方法 - Angular Application
- javascript - 如何使用 mongo 创建带有字段/变量/索引的集合
- google-cloud-dataflow - 在使用自定义分隔符分隔的 Apache Beam 中读取多行文件