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>

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

相关推荐
freewlt1 小时前
前端性能优化实战:从 Lighthouse 分数到用户体验的全面升级
前端·性能优化·ux
小小亮011 小时前
Next.js基础
开发语言·前端·javascript
华洛2 小时前
我用AI做了一个48秒的真人精品漫剧,不难也不贵
前端·javascript·后端
Amumu121382 小时前
Js:正则表达式(二)
开发语言·javascript·正则表达式
Novlan12 小时前
我把 Claude Code 里的隐藏彩蛋提取出来了——零依赖的 ASCII 虚拟宠物系统
前端
Sgf2273 小时前
ES8(ES2017)新特性完整指南
开发语言·javascript·ecmascript
IAUTOMOBILE3 小时前
Python 流程控制与函数定义:从调试现场到工程实践
java·前端·python
好大哥呀3 小时前
C++ Web 编程
开发语言·前端·c++
爱学习的小仙女!4 小时前
面试题 前端(一)DOCTYPE作用 标准模式与混杂模式区分
前端·前端面试题
小小小小宇5 小时前
前端转后端基础- 变量和类型
前端