【布局细节】vue中遍历iconfont图标

方法一

template部分代码：

{{item.icon}}

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文字，后者存样式