gpt4 book ai didi

javascript - Vue JS v-html 指令呈现原始 html

转载 作者:行者123 更新时间:2023-12-01 23:51:55 24 4
gpt4 key购买 nike

这是我的组件的样子

<template>
<div v-html="someHtml"></div>
</template>

<script>
export default {
name: "test",
props: {
someHtml: String,
},
}
</script>

组件在故事书中的使用方式:

export const testtest = () => ({
components: {test},
props: {
someHtml: {default: text('somehtml', '<a href="link" class="link text-theme">see data</a>')}
},
template: `
<test v-bind="$props"/>
`,
});

输出总是像这样的 html 原始字符串 ==>

<a href="link" class="link text-theme">see data</a>

我知道这可能会遭到很多反对,但我找不到使这项工作成功的方法。文档清楚地说明了用法,但它仍然不适合我。

我将原始 html 作为 Prop 传递。当我使用来自 vue js 数据的原始 html 时,它正在工作并且能够“解析”html 字符串并正确呈现它。

最佳答案

这不是 v-html 的问题,而是故事书引起的 - the text knob escapes HTML .

虽然有一种方法可以通过设置 escapeHTML to false for the knobs addon 来关闭它。 .

关于javascript - Vue JS v-html 指令呈现原始 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63361590/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com