如何使用

v-html指令是用来更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。就是把你写的html代码插入到当前指令所在的元素内。

直接使用v-html指令，如下：

//数据
{
    html:"<span>hello world</span>"
}

//使用
<h1 v-html="html"></h1>


//编译后的结果
<h1>
    <span>hello world</span>
</h1>

v-html相对于v-text在项目开发中无疑少了很多或者说很少使用（因人而异，但一般开发使用v-html的场景是比较少的），那么什么场景下我们才会使用呢？欢迎大家评论，说出你使用的场景，以下是我认为可以用到的场景。

特殊需求，后端给的数据是html字符串并需要我们去渲染
使用table时，有时我们需要某一项给不用的颜色或者样式显示，这时候我们可以插入一个内联样式标签
一个标签下，需要展示多种标签，可以使用v-html指令
......(等你评论)

自定义指令

Vue3中如何自定义一个指令？

上一篇文章我们模拟了一个v-text指令，今天我们来模拟一下v-html指令，我们姑且就称它为v-chtml吧。

<div id="app">
    <h1 v-chtml="html"></h1>
</div>

<script src="../dist/vue.global.js"></script>
<script>
    const { createApp, ref } = Vue
    const app = createApp({
        setup() {
            const html=ref("<span style='color:red'>hello world</span>")
            return {
                html
            }
        }
    })
    // 自定义v-chtml改变当前元素的内容
    app.directive('chtml',{
        mounted(el,{value}){
            el.innerHTML=value;
        }
    })
    app.mount("#app")
</script>

如果你读过回首Vue3之指令篇（一）｜8月更文挑战这篇文章，就可以看出，自定义v-chtml与v-ctext指令基本相同，只有细微的差异。

innerHTML

从上述代码中el.innerHTML=value可以看出，我们在替换el的内容时用的是innerHTML。指定的值被解析为 HTML 或 XML（基于文档类型），从而生成一个DocumentFragment对象，表示新元素的新 DOM 节点集。

总结

官方提示：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
v-html与v-text有很多的相似性，我们可以类比学习，他们所做的本质都是改变当前元素的内容。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之指令篇（二）｜8月更文挑战

如何使用

自定义指令

Vue3中如何自定义一个指令？

innerHTML

总结