当后端返回的数据是这样时：

这时我们想到使用[vue指令]v-html实现，但是这样会有问题，如何防止跨站点脚本（XSS）攻击？这里我们借助插件dompurify+自定义命令来实现，直接上代码

一.安装

npm install dompurify

二.main.js中引入 并封装全局指令

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router.js'
import DOMPurify from 'dompurify';

let app = createApp(App)
app.directive('purify-html',{
    updated:(el, binding, vnode) => { // el元素 dom操作可读可写 binding（只读）：通过自定义指令传递的参数都在这里 vnode（只读）：Vue编译生成的虚拟节点。
        console.log(binding)
        let clean = DOMPurify.sanitize(binding.value)
        // px 转成rem布局
        // clean = clean.replace(/(\d+)px/g, function(s, t) {
        //     s = s.replace('px', '');
        //     var value = parseInt(s) * 0.0000000001; // 100px = 1rem
        //     return value + "rem"; //0.23rem
        // }); 
        el.innerHTML = clean
    }
})

app.mount('#app')

三.使用

<div  v-purify-html="articlesdet.content" data-id="123"></div>