在平时获取后台数据渲染页面的时候可能会出现后台返回的数据是带有 html 特殊标签的
需求是附带的样式也不要, 意思就是直接删掉那些内容
但是在网上找挺久都没有找到现成的方法 最后是自己找了两个方法拼接出来的 所以在这里总结一下 方便以后直接 cv

// 返回数据: 
ret : {
	list: {
		"introduct": '<p style="color: lightcoral;">就 当文字就是内容吧。</p>',
	}
}
// 或者
ret : {
	list: {
		"introduct": '<span style="color: skyblue">就当文字就是内容吧。&nbsp;</p>',
	}
}
返回数据带有html特殊字符(’&nbsp;/&le;p&gt;’) -> 转成 html标签(<p>)
// 返回数据带有html特殊字符的话直接用 v-html 在页面上显示的是 html标签
<body>
    <div id="app">
        <div class="fd">
            {{message}}
            // 如果需要数据中的样式的可以直接 v-html 指令渲染这个字段就能渲染出来了
            <div class="box" v-html="'v-html: ' + message"></div>
            <button class="btn" @click="click1">dianwo</button>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '&lt;p style="color: lightcoral;"&gt;就&nbsp;当文字就是内容吧。&lt;/p&gt;'
        },
        methods: {
            click1() {
                this.message = this.escapeHtml(this.message)
            },
            // 处理方法
            escapeHtml(str) {
                var arrEntities = {
                    'lt': '<',
                    'gt': '>',
                    'nbsp': ' ',
                    'amp': '&',
                    'quot': '"'
                };
                return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
                    return arrEntities[t];
                });
            },
        }
    })
</script>

在这里插入图片描述

上面这个方法来自：https://blog.csdn.net/weixin_49186680/article/details/108746341

返回数据带有 html标签(<span>) -> 把 html标签 去掉
// 如果不想要后台返回在数据终的样式的话可以这样处理
<body>
    <div id="app">
        <div class="fd">
            {{message}}
            <div class="box" v-html="'v-html: ' + message"></div>
            <button class="btn" @click="click1">dianwo</button>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '<span style="color: skyblue">就当文字就是内容吧。&nbsp;</span>'
        },
        methods: {
            click1() {
                this.message = this.delHtmlTag(this.message)
            },
            // 处理方法
            delHtmlTag(str) {
                return str.replace(/<[^>]+>/g, '').replace(/&nbsp;/ig, "")
            }
        }
    })
</script>

在这里插入图片描述

上面的方法来自：https://blog.csdn.net/weixin_44565191/article/details/109716908

返回数据带有html特殊字符(’&nbsp;/&le;p&gt;’) -> 去掉特殊字符
// 如果返回的带有 html特殊字符 都不要 结合上面两个方法 改吧改吧 就能瞒住要求了
<body>
    <div id="app">
        <div class="fd">
            {{message}}
            <div class="box" v-html="'v-html: ' + message"></div>
            <button class="btn" @click="click1">dianwo</button>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '<span style="color: skyblue">就当文字就是&nbsp;内&nbsp;容吧</span>'
        },
        methods: {
            click1() {
                this.message = this.escapeHtml(this.message)
            },
            // 终极 处理方法
            escapeHtml(str) {
                var arrEntities = {
                    'lt': '<',
                    'gt': '>',
                    'amp': '&',
                    'quot': '"'
                };
                let htmlTag = str.replace(/&(lt|gt|amp|quot);/ig, function(all, t) {
                    return arrEntities[t];
                });
                // console.log(htmlTag);
                return htmlTag.replace(/<[^>]+>/g, '').replace(/&nbsp;/ig, "")
            },
        }
    })
</script>

在这里插入图片描述

感谢一下引用的这些大佬的内容
还有附上 样式 要想亲自试试效果的我把样式放这里

.fd {
	margin: 100px auto;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
        
.box {
	margin: 30px 0;
	
	display: flex;
	align-items: center;
}
        
.btn {
	width: 100px;
}
# javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue