vue3教程-v-html指令填充html代码 作者：马育民 • 2024-12-17 09:22 • 阅读：10004 # 介绍 功能、写法类似 `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 的方式显示到页面上，即：字体变成红色 如下图： [](https://www.malaoshi.top/upload/pic/vue/QQ20201227123341.png) 原文出处：http://malaoshi.top/show_1GWEerMTOpt.html