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>

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

相关推荐
小码哥_常31 分钟前
Spring Boot配置diff:解锁配置管理新姿势
前端
小码哥_常34 分钟前
告别onActivityResult!Android数据回传的3大痛点与终极解决方案
前端
hhcccchh1 小时前
1.2 CSS 基础选择器、盒模型、flex 布局、grid 布局
前端·css·css3
修己xj1 小时前
Markdown 里写公式,别只知道 LaTeX!试试 HTML 标签,简单到飞起
html
专吃海绵宝宝菠萝屋的派大星2 小时前
使用Dify对接自己开发的mcp
java·服务器·前端
爱分享的阿Q2 小时前
Rust加WebAssembly前端性能革命实践指南
前端·rust·wasm
蓝黑20202 小时前
Vue的 value=“1“ 和 :value=“1“ 有什么区别
前端·javascript·vue
小李子呢02112 小时前
前端八股6---v-model双向绑定
前端·javascript·算法
He少年2 小时前
【基础知识、Skill、Rules和MCP案例介绍】
java·前端·python
史迪仔01122 小时前
[QML] QML IMage图像处理
开发语言·前端·javascript·c++·qt