如何在vue中渲染html
在使用vue过程中,我们会有直接渲染一段html的需求,vue默认提供了v-html来渲染一段html。比如,我们可以这样用:
|
|
上边的代码会在div内部渲染我们的html内容。这个功能很方便,但是不一定满足我们所有的需求。比如说我前段时间有这样一个需求,渲染一段html,但是不要新增无关div的标签。我先是尝试template标签,像是这样子:
|
|
结果发现这样并不会渲染,因为template标签的内容会被忽略。搜索了好久似乎没有什么解决方案,后来看到了v-html是使用innerHTML在当前DOM元素下插入指定的html内容,灵光一现!v-html是vue内置指令,那么我可以模仿它写一个自定义指令,由innerHTML改为outerHTML可以了!以下是自定义指令内容:
|
|
这样子即可去掉外边无用的标签了,用法如下:
|
|
这样子渲染出来的结果中,就没有外边的div标签了。
总结
前端框架用起来都很方便,但是也不能被框架限制住思维。看到只有一个v-html指令,并且无法实现自己的目标的时候,我们可以跳出框架的束缚,思考框架是如何实现的,有没有办法改变,或许实现起来也不难。