Vue 3 v-html 指令: 解析 Html 代码

一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书活动

目前， 星球 内第一个项目：全栈前后端分离博客项目，演示地址：http://116.62.199.48/, 1.0 版本已经更新完毕，正在更新 2.0 版本。采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4，手把手，前端 + 后端全栈开发，从 0 到 1 讲解每个功能点开发步骤，1v1 答疑，陪伴式直到项目上线，目前已更新了 224 小节，累计 35w+ 字，讲解图：1544 张，还在持续爆肝中，后续还会上新更多项目，目标是将 Java 领域典型的项目都整上，如秒杀系统、在线商城、IM 即时通讯、权限管理等等，已有 1000+ 小伙伴加入，欢迎点击围观 。

<template>
  <!-- 纯文本 -->
  <div>{{ obj.title }}</div>
  <!-- 纯文本 -->
  <div v-text="obj.title"></div>
  <!-- 被解析为 HTML 元素 -->
  <div v-html="obj.title"></div>

</template>

<script setup>
import { reactive } from 'vue';

// reactive 函数用于响应式对象
const obj = reactive({
  title: '<h1>犬小哈教程</h1>'
})

</script>