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>

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

相关推荐
AIBox36522 分钟前
openclaw api 配置排查与接入指南:网关启动、配置文件和模型接入全流程
javascript·人工智能·gpt
precious。。。30 分钟前
1.2.1 三角不等式演示
前端·javascript·html
阿珊和她的猫40 分钟前
TypeScript 中的 `extends` 条件类型:定义与应用
javascript·typescript·状态模式
众创岛1 小时前
iframe的属性获取
开发语言·javascript·ecmascript
小陈工1 小时前
Python Web开发入门(十一):RESTful API设计原则与最佳实践——让你的API既优雅又好用
开发语言·前端·人工智能·后端·python·安全·restful
星空1 小时前
前段--A_2--HTML属性标签
前端·html
a1117761 小时前
MapDesigner (html开源项目)六角格地图设计工具
开源·html
三万棵雪松1 小时前
【Linux 物联网网关主控系统-Web部分(一)】
linux·前端·嵌入式linux
摸鱼仙人~1 小时前
增量快照 vs 结构化共享:适用场景全解析
前端·vue.js
2301_771717212 小时前
Jackson的使用方法详解
java·服务器·前端