介绍

官网：https://cn.vuejs.org/v2/api/#v-html

填充html代码，内容按普通 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-text="psf*0.4 + qm * 0.6 "></span>
</div>
<script>
    var app = new Vue({
        el: '#app', //找到id是app的元素
        data: { //数据
            msg: '<span style="color: red">红色字体样式</span>',
            psf:30,// 平时分30
            qm:70, // 期末考试成绩70分
        }
    })
</script>

解释

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

如下图：

原文出处：/show_1IXIR5rlUkI.html