icon 循环使用

export default {
    data() {
        return {
            userInfo: null, // 用户信息
            reportIconList: [
                {
                    icon: '',
                    text: '心理测评',
                    path: ''
                },
                {
                    icon: '',
                    text: '我的报告',
                    path: '/pages/mentalTest/components/mental-report'
                },
                {
                    icon: '',
                    text: '我的计划',
                    path: ''
                },
                {
                    icon: '',
                    text: '我的预约',
                    path: ''
                }
            ],
    }
  }
}

上面这样是不回渲染的，应该修改为下面的样子，把 &#x 替换成 \u，并且去掉后面的 ; 分号

在循环该数组时，会去iconfont中查找，如果不加 u 的话，会输出为字符串，所以必须在 e前加上u

最重要的一点就是一定要在你循环的元素标签中加入class=“iconfont”

export default {
    data() {
        return {
            userInfo: null, // 用户信息
            reportIconList: [
                {
                    icon: '\ue89a;',
                    text: '心理测评',
                    path: ''
                },
                {
                    icon: '\ue6ca;',
                    text: '我的报告',
                    path: '/pages/mentalTest/components/mental-report'
                },
                {
                    icon: '\ue645;',
                    text: '我的计划',
                    path: ''
                },
                {
                    icon: '\ue645;',
                    text: '我的预约',
                    path: ''
                }
            ],
    }
  }
}

解释(AI输出)

在使用字体图标时，图标通常是通过特定的 Unicode 字符进行编码的。如果你在 HTML 中使用类似 &#x 的格式，这是一种 HTML 字符实体表示法，用于在 HTML 中表示 Unicode 字符。具体来说，&#x 表示十六进制的 Unicode 字符实体。

比如， 是一种表示方法，其中 xe600 是一个十六进制的 Unicode 码点。这种方法通常在 HTML 内容中使用。

然而，当你在 CSS 中使用这些字符时，通常需要使用 \u 形式来表示 Unicode 字符。例如，在 CSS 的 content 属性中，你可以这样写：

.icon::before {
  content: "\e600";
  font-family: "iconfont";
}

\u 表示 Unicode 字符，而后面的 e600 是实际的码点。这种方式适用于 CSS，因为 CSS 不支持 HTML 字符实体。

因此，当你把 &#x 替换为 \u 并在 CSS 中使用时，浏览器能够正确地解析和显示相应的图标。这就是为什么替换后能够正确显示图标的原因。