vue 中v-html将原始html渲染为带样式的文本

最新推荐文章于 2024-10-08 10:03:30 发布

Girasoless

最新推荐文章于 2024-10-08 10:03:30 发布

阅读量334

点赞数 2

文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/Girasoles/article/details/136397455

版权

文章介绍了如何在Vue应用中使用自定义方法进行HTML文本的解析和安全渲染，包括`$HtmlUtils`对象的创建、`containsHtmlTags`函数用于检测HTML标签、以及`renderHtml`函数进行HTML内容的解码和转义。

摘要由CSDN通过智能技术生成

<template slot-scope="scope">
    <span v-if="!containsHtmlTags(scope.row.value)">{{ scope.row.value }}</span>
        <div v-else>
            <div v-html="renderHtml(scope.row.value)"></div>
        </div>
</template>  
//放在import下面或者是create里面注册
Vue.prototype.$HtmlUtils = {
    htmlDecode: function(text) {
        var temp = document.createElement("div");
        temp.innerHTML = text;
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    }
};     
//写在方法里面 
// 检查是否包含html标签
        containsHtmlTags(str){
            if(str.indexOf('&lt') > -1){
                return true;
            }else{
                return false;
            }
        },
        // 转义富文本
        renderHtml(value){
            return this.$HtmlUtils.htmlDecode(value);
        },