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>

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

相关推荐
大孜然5 分钟前
孜然QQ频道自动化程序机器人配置教程
前端
用户469384921556 分钟前
AIUI 焦点高亮切换失效排查与规避:为什么按钮不变换形态呢?
前端
派大鑫wink14 分钟前
纯前端实现软考中级·软件设计师备考学习网站
前端·学习
kyriewen25 分钟前
我扒了 npm 三年数据:AI 没把依赖变胖,是把包变多了
前端·人工智能·程序员
SensorFlow43 分钟前
曝光埋点别放在组件渲染里:连续可见与去重范围怎么验收
javascript
harris148154352975843 分钟前
能解码不等于能信任:JWT 的签名到底验的是什么
javascript
liqingdi43744 分钟前
[SWPUCTF 2023 秋季新生赛]Easy SMC
服务器·前端·javascript
用户87359865635871 小时前
为什么 greedy 也可能出不同 token,MoE 为什么更严重
前端
日耗10亿Token被老板赶出门1 小时前
REA 火了:一个 Electron 按钮的调用链,它能追到哪一步?
javascript·electron
Gizzap_Tech1 小时前
多语言官网如何兼顾统一与本地化?从页面生成到语言切换
前端