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>

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

相关推荐
KaMeidebaby1 分钟前
卡梅德生物技术快报|抗体筛选:抗体筛选中的噬菌体展示四参数调优——从流程设计到数据验证
开发语言·前端·javascript
甲维斯8 分钟前
Opus5.0首测,瘫坐沙发!效果,时间,token皆无敌!
前端·人工智能
LVZ10 分钟前
Skill + PVM 绝了,AI 直接帮你搞定环境问题了
前端
颜进强14 分钟前
从零搭建私人 RAG 知识库:让项目决策真正“可检索、可追溯”
前端·后端·ai编程
颜进强17 分钟前
Embedding 模型介绍:热门模型对比与应用场景
前端·后端·ai编程
颜进强19 分钟前
LanceDB 基础使用:用 TypeScript 完成第一次向量检索
前端·后端·ai编程
xyphf_和派孔明20 分钟前
企业级微前端项目完整创建步骤,第二步:配置主应用
前端
默_笙25 分钟前
🔑 让 AI 学会"读"网页:我用 Cheerio 爬了一篇掘金文章,然后切成小块存进了向量库
前端·javascript
颜进强26 分钟前
Ollama 从入门到实践:本地模型运行、API 调用
前端·后端·ai编程
颜进强30 分钟前
Embedding 基础使用:用 Ollama 和 LangChain.js 生成文本向量
前端·后端·ai编程