时间戳

首页 > 解决方案 > 如何在 svelte 中渲染 html

html - 如何在 svelte 中渲染 html

问题描述

我尝试通过将 html 存储在变量中来呈现 html，但它不起作用，我还尝试了三重花括号

<script>
    let name = 'world';
    let val = ""
    let ans2 = ""
    let ans3;
    import showdown from 'showdown';
    import validity from 'validity-checker';
    function dataSubmit(e){
        e.preventDefault();
    //ans = validity.isEmoji("ggg");
    ans2 = new showdown.Converter();
    ans3 = ans2.makeHtml(val)
    }
</script>

<div>
    <textarea bind:value={val} on:change={dataSubmit}></textarea>
    <div>
    {{{ans3}}}  
    </div>

</div>

ans3 变量的返回类型类似于“<h1>Hello</h1>”

标签： htmlrendersveltesvelte-3

解决方案

您可以使用{@html expression}

Svelte 在注入 HTML 之前不会清理表达式。如果数据来自不受信任的来源，您必须对其进行清理，否则您会将用户暴露在 XSS 漏洞中。

推荐阅读