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>

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

相关推荐
椰羊~王小美9 分钟前
除了前端 JS 配置的国际化,对于 JS 没覆盖到的文本,怎么实现国际化
前端·javascript·状态模式
AC赳赳老秦18 分钟前
DBA 专属方案:用 OpenClaw 实现 SQL 语句优化、慢查询分析、数据库备份巡检全自动化
服务器·前端·数据库·ffmpeg·自动化·deepseek·openclaw
燐妤34 分钟前
前端HTML编程1:初识html
前端·html5
xiaoye370835 分钟前
java接口文档工具 swagger2和swagger3对比
java·服务器·前端
tongyiixiaohuang38 分钟前
基于轻易云的数据集成,实现企业系统间灵活对接
java·前端·数据库
哥本哈士奇43 分钟前
Power BI学习笔记第17篇:Power BI Dashboard 常用布局方案推荐
前端·powerbi
军军君011 小时前
数字孪生监控大屏实战模板:固体颗粒物监管平台
前端·javascript·vue.js·typescript·前端框架·echarts·less
菜鸟小码1 小时前
MapReduce 核心思想:分而治之,大数据处理的智慧之源
前端·javascript·mapreduce
前端那点事1 小时前
Cookie和Token的核心区别(附使用场景,易懂好记)
前端·vue.js
前端那点事1 小时前
Vue设计模式实战解析:6种高频模式+源码拆解,面试/开发双适用
前端·vue.js