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>

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

相关推荐
Можно几秒前
pages.json 和 manifest.json 有什么作用?uni-app 核心配置文件详解
前端·小程序·uni-app
hzhsec3 分钟前
钓鱼邮件分析与排查
服务器·前端·安全·web安全·钓鱼邮件
早點睡39013 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-render-html
react native·react.js·html
爱看老照片19 分钟前
uniapp传递数值(数字)时需要使用v-bind的形式(加上冒号)
javascript·vue.js·uni-app
#做一个清醒的人21 分钟前
Electron 保活方案:用子进程彻底解决原生插件崩溃问题
前端·electron·node.js
四千岁22 分钟前
Obsidian + jsDelivr + PicGo = 免费无限图床:一键上传,全平台粘贴即发
前端·程序员·github
慧一居士23 分钟前
CSS中 ::deep 作用,使用场景,使用方法介绍
前端·css·vue.js
周聪灬26 分钟前
iOS runtime(2)-class结构和消息转发机制
前端
周聪灬28 分钟前
浅谈对Objective-C的对象本质的理解
前端