uni-app 用变量的形式输出的 html 部分无法正常解析

uni-app 用变量的形式输出的 html 部分无法正常解析

操作步骤：

  • 用js数组输出即可复现

预期结果：

  • 根据输出html代码解析为想要的样式和数据

实际结果：

  • 没有正常解析

bug描述：

例如用js数组的形式，数组其中一个元素的值为

card_list: [{  
    content: '<view class="iconfont">&#xe612;</view>'  
}]

渲染完成后，界面显示的还是这个源代码，并没有正常的当作元素解析

更换为如下形式，数组中元素的值改为：&#xe612
界面html代码为

<view class="iconfont">{{item.content}}</view>

渲染完成后，界面显示的是 &#xe612 而不是正确的字体
通过开发工具查看源代码

<view class="iconfont">&#xe612;</view>

除非改成如下格式

<view class="iconfont" v-html="item.content"></view>

但通过开发工具查看源码发现，实际上被转换为 rich-text 这种标签了。
不知道是否有禁止某些场景下自动解析的方法呢

Image Image


更多关于uni-app 用变量的形式输出的 html 部分无法正常解析的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 用变量的形式输出的 html 部分无法正常解析的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，使用变量输出 HTML 内容时，默认不会解析 HTML 标签或实体字符。这是因为 uni-app 出于安全考虑，默认对动态内容进行转义处理，避免 XSS 攻击。

你的问题涉及两种情况：

  1. 直接输出包含 HTML 标签的字符串：
    如 content: '<view class="iconfont">&#xe612;</view>'，若通过 {{}} 插值渲染，内容会被转义为纯文本，显示为源代码。
    此时需使用 v-html 指令强制解析 HTML，但注意在非 H5 平台（如小程序）中，v-html 会被转换为 rich-text 组件，这是跨端兼容的必要处理。

  2. 输出 HTML 实体字符（如 &#xe612;）：
    即使通过 v-html 解析，实体字符也可能无法直接显示为图标。原因是 &#xe612; 需在 CSS 中通过 content 属性渲染（如字体图标库），而 v-html 或 rich-text 无法直接触发 CSS 伪元素的解析。

解决方案：

  • 若需渲染字体图标，建议直接使用 Unicode 字符或字体类名，而非实体字符。例如：

    card_list: [{ content: '\\ue612' }] // 使用 Unicode 转义序列

    并在模板中通过类名控制样式：

    <view class="iconfont">{{ item.content }}</view>

    同时确保 CSS 中定义了 iconfont 的字体家族和对应字符的样式。

  • 若必须渲染动态 HTML（如富文本），需接受跨端差异：H5 平台使用 v-html，非 H5 平台使用 rich-text 组件。uni-app 无全局禁止解析的配置，但可通过条件编译按平台处理：

    <!-- #ifdef H5 -->
<view v-html="item.content"></view>
<!-- #endif -->
<!-- #ifndef H5 -->
<rich-text :nodes="item.content"></rich-text>
<!-- #endif -->
回到顶部