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>

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

相关推荐
Coder_Boy_1 分钟前
基于SpringAI的在线考试系统-成绩管理功能实现方案
开发语言·前端·javascript·人工智能·spring boot
幻云20105 分钟前
Python深度学习:从筑基与巅峰
前端·javascript·vue.js·人工智能·python
Light606 分钟前
庖丁解牛:深入JavaScript内存管理,从内存泄漏到AI赋能的性能优化
javascript·人工智能·性能优化·内存管理·垃圾回收·内存泄漏·v8引擎
_OP_CHEN10 分钟前
【前端开发之HTML】(三)HTML 常见标签(下):图文、链接与实战,解锁网页交互新姿势!
前端·html·交互·前端开发·网页开发·界面美化
3345543211 分钟前
vue表格遍历根据表头里的类型和每行的状态来判断
javascript·vue.js·chrome
岳哥i8 小时前
vue鼠标单机复制文本
javascript
jacGJ9 小时前
记录学习--文件读写
java·前端·学习
毕设源码-赖学姐9 小时前
【开题答辩全过程】以 基于WEB的实验室开放式管理系统的设计与实现为例,包含答辩的问题和答案
前端
幻云20109 小时前
Python深度学习:从筑基到登仙
前端·javascript·vue.js·人工智能·python
我即将远走丶或许也能高飞11 小时前
vuex 和 pinia 的学习使用
开发语言·前端·javascript