Vuetify3:文章显示html标签

在Vuetify 3中,如果你想要显示一个包含HTML标签的文章,你可以使用v-html指令来渲染这些标签。这个指令会将绑定的HTML内容渲染到模板中,但要注意,由于直接渲染HTML可能会有XSS攻击的风险,因此只在可靠内容上使用v-html指令。

我们直接上代码:

复制代码
<template>
  <v-card>
    <v-card-title>文章标题</v-card-title>
    <v-card-subtitle>更新:2024-7-1 10:47:11    发布:178校园网      纠错</v-card-subtitle>
    <v-card-text v-html="rawHtml"></v-card-text>
  </v-card>
</template>
 
<script>
export default {
  data() {
    return {
      rawHtml: '<p>这里是文章的<strong>HTML</strong>内容,例如加粗文本。</p><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" class="icon" />'
    };
  }
};
</script>

如果在过程中,遇到图片不能正常访问,需要查看一下源码,是否需要设置路由。

相关推荐
前端无涯5 分钟前
react组件(4)---高阶使用及闭坑指南
前端·react.js
Gomiko17 分钟前
JavaScript DOM 原生部分(五):事件绑定
开发语言·前端·javascript
出来吧皮卡丘20 分钟前
A2UI:让 AI Agent 自主构建用户界面的新范式
前端·人工智能·aigc
Jeking21721 分钟前
进阶流程图绘制工具 Unione Flow Editor-- 击破样式痛点:全维度自定义解决方案
前端·流程图·workflow·unione flow·flow editor·unione cloud
晴转多云54321 分钟前
关于Vite后台项目的打包优化(首屏加载)
前端
巴拉巴拉~~25 分钟前
Flutter 通用下拉选择组件 CommonDropdown:单选 + 搜索 + 自定义样式
开发语言·javascript·ecmascript
阿苟26 分钟前
nginx部署踩坑
前端·后端
小林攻城狮28 分钟前
pdfmake 生成平铺式水印:核心方法与优化
前端
search731 分钟前
前端设计:CRG 2--CDC检查
前端·芯片设计
松涛和鸣33 分钟前
DAY33 Linux Thread Synchronization and Mutual Exclusion
linux·运维·服务器·前端·数据结构·哈希算法