解决阿里巴巴图标在v-for循环中渲染不出图标问题

解决阿里巴巴图标在v-for循环中渲染不出图标问题

v-for循环，按照下载的项目图标步骤来走

v-for 循环
<span v-for="(item, index) in info"
                :key="index">
            <i class="iconfont">{{item.icon}}</i>
 </span>
//页面中渲染的结果： 
图标循环渲染： &#xe689;&#xe689;
//这是因为在循环时，把icon当字符串处理了


info: [
        {
          icon: '&#xe689;'
        },
        {
          icon: '&#xe689;'
        }
]

不用v-for情况下，可以显示

<span class="iconfont">&#xe689;</span>

解决办法：

1. {{ }} 将元素当成纯文本输出

2. v-text 将元素当成纯文本输出

3. v-html 将元素当成HTML标签解析后输出

   我们只需要将item.icon以html标签输出，这样iconfont才能正确渲染

<span v-for="(item, index) in info"
                :key="index">
            <i class="iconfont"
               v-html="item.icon"></i>
</span>

页面中显示的结果：