方法一
template部分代码:
<div class="iconfont">{{item.icon}}</div>
script部分代码:
export default {
name: 'BottomBar',
setup () {
const bottomBarList = [
{ icon: '\ue751', text: '首页' },//需要将iconfont复制的十六进制unicode代码(如 &#x转为\u)
{ icon: '\ue899', text: '购物车' },
{ icon: '\ue655', text: '订单' },
{ icon: '\ue615', text: '我的' }
]
return { bottomBarList }
}
}
方法二
可以保留图标的unicode格式代码,template不使用插值表达式,
使用v-html= " item.icon",其余部分按照方法一的去修改即可。
这样后续调整样式方便许多。\
由此可知道vue中插值表达式和 v-html的区别,前者为text文字,后者存样式