今天面试,被问到了这个问题,网上查阅了一下,找到了一个解决方案

1. 输入指令 npm install vue-dompurify-html    安装vue-dompurify-html这个插件

2. 在mian.js中做出配置

import { createApp } from 'vue'
import App from './App.vue'

import './assets/main.css'

const app = createApp(App)
// 防止 v-html 进行 xss注入
import VueDOMPurifyHTML from 'vue-dompurify-html'
app.use(VueDOMPurifyHTML)

app.mount('#app')

3. 把 v-html 指令替换为 v-dompurify-html 指令即可

<template>
  <h2>App --- {
   { num }}</h2>
  <div v-dompurify-html="article"></div>
</template>

<script>
export default {
  name: 'App',
  setup() {
    const num = 10
    const article = `<span style="color: red">红色的</span>`
    return {
      num,
      article,
    }
  },
}
</script>

<style scoped></style>

原文链接:https://blog.csdn.net/qq_52845451/article/details/126730431

最后修改:2023 年 10 月 30 日
如果觉得我的文章对你有用,请随意赞赏