如何在vue中渲染html

如何在vue中渲染html

在使用vue过程中,我们会有直接渲染一段html的需求,vue默认提供了v-html来渲染一段html。比如,我们可以这样用:

1
    <div v-html="content"></div>

上边的代码会在div内部渲染我们的html内容。这个功能很方便,但是不一定满足我们所有的需求。比如说我前段时间有这样一个需求,渲染一段html,但是不要新增无关div的标签。我先是尝试template标签,像是这样子:

1
    <template v-html="content"></template>

结果发现这样并不会渲染,因为template标签的内容会被忽略。搜索了好久似乎没有什么解决方案,后来看到了v-html是使用innerHTML在当前DOM元素下插入指定的html内容,灵光一现!v-html是vue内置指令,那么我可以模仿它写一个自定义指令,由innerHTML改为outerHTML可以了!以下是自定义指令内容:

1
2
3
4
5
6
7
8

    Vue.directive('oHtml', {
        inserted: (el, dir) => {
            if (dir.value) {
                el.outerHTML = dir.value
            }
        }
    })

这样子即可去掉外边无用的标签了,用法如下:

1
2

    <div v-o-html="content"></div>

这样子渲染出来的结果中,就没有外边的div标签了。

总结

前端框架用起来都很方便,但是也不能被框架限制住思维。看到只有一个v-html指令,并且无法实现自己的目标的时候,我们可以跳出框架的束缚,思考框架是如何实现的,有没有办法改变,或许实现起来也不难。

Licensed under CC BY-NC-SA 4.0
最后更新于 Jul 08, 2025 08:39 UTC
comments powered by Disqus
使用 Hugo 构建
主题 StackJimmy 设计