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>

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

相关推荐
Profile排查笔记14 小时前
指纹浏览器环境异常排查:Fingerprint、Profile、Proxy、Session 和 Task Log 怎么看
前端·人工智能·后端·自动化
京韵养生记14 小时前
【无标题】
java·服务器·前端
大气的小蜜蜂14 小时前
领域层的服务
java·前端·数据库
星栈14 小时前
LiveView 的 LiveComponent:比 React 组件更轻,但我一开始真的把它用错了
前端·前端框架·elixir
竹林81815 小时前
用 Pinata + IPFS 存 NFT 元数据踩了三天坑,我总结了这份完整的前端实现方案
javascript
林希_Rachel_傻希希15 小时前
web性能优化之延迟加载图片和<inframe>
前端·javascript·面试
maxmaxma15 小时前
Konva 从入门到实践 - day1
前端
火星校尉15 小时前
一场数据基建与消费场景的跨界实验
java·前端·数据库·python·php
W是笔名15 小时前
python_let`s try it 6___BMI计算器
java·前端·python
risc12345615 小时前
Lucene80DocValuesConsumer 五种类型源码阅读顺序
java·服务器·前端