我想在Vue中使用以下道具制作自定义组件：
> text =要在链接中显示的文本.
> icon =链接旁边显示的图标的标识符.
< sidebar-link text=”Home” icon=”fa-home”>
我有我的组件的以下.Vue模板.
<template>
<div id="sidebarItem">
<a href="/index.PHP">
<div id="sidebarIcon"><i :class="{fa : true}" aria-hidden="true"></i></div>
<div id="sidebarText">{{ text }}</div>
</a>
</div>
</template>
<script>
export default {
props: ['text','icon'],data () {return {}}
}
</script>
基本上我在我的模板中有默认的Font-Awesome代码：
<i class="fa fa-home" aria-hidden="true"></i>
我希望通过使用它的prop来为我的组件添加一个类.
<sidebar-link text="Home" icon="fa-home"></sidebar-link>
谢谢.
解决方法
因此,当您的属性图标保持值为home时,您可以使用一些类绑定,如下所示(感谢上帝js表达式在Vue.js中允许在
attributes内)：
v-bind:class="[{'fa': true},icon ? 'fa-' + icon : '']"
甚至更短
:class="[{'fa': true},icon ? 'fa-' + icon : '']"
这将导致
class="fa fa-home"
