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>

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

相关推荐
FRing0313 小时前
JavaScript入门到精通二十八(forEach遍历、创建对象的三种方式、构造函数、new实例化执行过程、实例成员和静态成员)
开发语言·前端·javascript
燕落南枝13 小时前
CSS 表单选择器与伪元素选择器详解
前端·css
拖孩13 小时前
一个人 + AI 做的小程序,今天,正式回本了
前端·后端·微信小程序
进击的丸子13 小时前
APP 人脸识别增值版 SDK:Camera2 无缝接入指南
前端·前端框架·代码规范
进击的丸子13 小时前
代理网络环境下 Linux Pro 在线激活实操指南
javascript·后端·安全
开开心心就好13 小时前
本地文件搜索工具,双击Ctrl就能呼出搜索
java·服务器·前端·支持向量机·ffmpeg·音视频·模拟退火算法
知了清语14 小时前
SVG 缩放预览:F12 无法定位子元素 & 放大模糊
前端
AN14 小时前
一个人,带着一群 AI:一个 10 年前端如何做出几十个团队在用的在线文档
前端
ByteCoder.14 小时前
班前十分钟的清单,按体检引导单来写
java·服务器·前端·助播虾
小大宇14 小时前
vue知识点9-标签上的ref
前端·javascript·vue.js