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>

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

相关推荐
强子感冒了17 小时前
JavaScript学习笔记:函数、方法与继承(原型与class)
javascript·笔记·学习
明月_清风17 小时前
你真的懂 JSON 吗?那些被忽略的底层边界与性能陷阱
前端·json
明月_清风17 小时前
大规模监控数据下的 JSON 优化:从 OOM 崩溃到极致吞吐的进阶之路
前端·json
打瞌睡的朱尤1 天前
Vue day10 完整购物网页(登录页,首页,搜索)
前端·javascript·vue.js
扶苏10021 天前
深入理解 Vue 3 的 watchEffect
前端·javascript·vue.js
未来龙皇小蓝1 天前
RBAC前端架构-05:引入Element-UI及相关逻辑
前端·ui
yanlele1 天前
AI Coding 时代下, 关于你会写代码这件事儿, 还重要吗?
前端·javascript·ai编程
打瞌睡的朱尤1 天前
Vue day9 购物车,项目,vant组件库,vw,路由
前端·javascript·vue.js
星火开发设计1 天前
模板参数:类型参数与非类型参数的区别
java·开发语言·前端·数据库·c++·算法
cc.ChenLy1 天前
【CSS进阶】毛玻璃效果与代码解析
前端·javascript·css