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>

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

相关推荐
JYeontu16 小时前
实现一个超萌的柯基交互输入框
前端
天蓝色的鱼鱼16 小时前
Vite 8:从“混动”到“纯电”,构建性能提升10倍+
前端·vite
dreams_dream16 小时前
XSS类型
前端·xss
wuhen_n16 小时前
副作用的概念与effect基础:Vue3响应式系统的核心
前端·javascript·vue.js
张3蜂16 小时前
Vue.js-知识体系
前端·javascript·vue.js
Cache技术分享16 小时前
333. Java Stream API - 按年份找出合作最多的作者对:避免 Optional.orElseThrow() 的风险
前端·后端
用户6000718191016 小时前
【翻译】元素与 Children 属性
前端·react.js
Mintopia16 小时前
又快又好的前端界面软件是怎么做出来的
前端
青青家的小灰灰16 小时前
深入解析 React 中的 useEffect:副作用管理的艺术与科学
前端·react.js
wuhen_n16 小时前
effect函数的完整实现与追踪:深入Vue3响应式核心
前端·javascript·vue.js