介绍

功能、写法类似 v-text，但是可以 将 html代码 添加到页面上

危险： 容易导致 XSS 攻击。只在可信内容上使用 v-html，如：本网站

例子

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="app">
    <p>{{ msg }}</p>
    <p v-html="msg"></p>
    最终成绩（平时分40%+期末考试60%）：<span v-html="psf*0.4 + qm * 0.6 "></span>
</div>
<script type="importmap">
{
    "imports": {
        "vue": "./js/vue.esm-browser@3.5.13.js"
    }
}
</script>
<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
        return {
            msg: '<span style="color: red">红色字体样式</span>',
            psf:30,// 平时分30
            qm:70, // 期末考试成绩70分
        }
    }
  }).mount('#app')
</script>

解释

• {{ msg }} 是将 <span style="color: red">红色字体样式</span> 以字符串的方式显示到页面上

• v-html="msg" 是将 <span style="color: red">红色字体样式</span> 以 HTML 的方式显示到页面上，即：字体变成红色

如下图：

原文出处：/show_1GWEerMTOpt.html