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>

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

相关推荐
独泪了无痕4 小时前
使用Fetch API 探索前后端数据交互
前端·http·交互设计
css趣多多4 小时前
别名路径的知识点
前端
靓仔建6 小时前
Vue3导入组件出错does not provide an export named ‘user_setting‘ (at index.vue:180:10)
开发语言·前端·typescript
EnoYao6 小时前
我写了一个团队体检报告 Skill,把摸鱼的同事扒出来了😅
前端·javascript
梁正雄6 小时前
Python前端-2-css练习
前端·css·python
清汤饺子6 小时前
用 Cursor 半年了,效率还是没提升?是因为你没用对这 7 个功能
前端·后端·cursor
Never_Satisfied6 小时前
在JavaScript / Node.js中,package.json文件中的依赖项自动选择最新版安装
javascript·node.js·json
蓝莓味的口香糖7 小时前
【vue3】组件的批量全局注册
前端·javascript·vue.js
wefly20177 小时前
开发者效率神器!jsontop.cn一站式工具集,覆盖开发全流程高频需求
前端·后端·python·django·flask·前端开发工具·后端开发工具
独泪了无痕7 小时前
自动导入 AutoImport:告别手动引入依赖,优化Vue3开发体验
前端·vue.js·typescript