javascript - 将全局 CSS 应用于注入的 HTML (v-html)
问题描述
我正在尝试使用 Vue 从我的数据库中注入 HTML。我能够成功注入 HTML,但是我遇到的问题是我的框架样式表(Vuetify)没有被应用。
它应用于页面的其余部分,而不是注入的 HTML。
如何获取注入的 HTML 以使用我的 Vuetify CSS?
此外,虽然我在检查 HTML 时可以看到它们,但我的 HTML 中的图像也没有呈现。
<div v-html="post.format"></div>
输出 HTML:
<div>
<v-container grid-list-md="" text-xs-center="">
<v-layout row="" wrap="">
<v-flex xs12="" md12="" lg6="">
<p class="text-lg-left">Post description text</p>
</v-flex>
<v-flex xs12="" md12="" lg6="">
<v-img class="center" style="max-width:250px" src="/img/1.jpg"></v-img>
</v-flex>
</v-layout>
</v-container>
<v-container grid-list-md="" text-xs-center="">
<v-layout row="" wrap="">
<v-flex xs12="" md12="" lg6="">
<v-img width="250px" class="center" src="/img/2.jpg">
</v-img>
</v-flex>
<v-flex xs12="" md12="" lg6="">
<p class="text-lg-left">More post description text</p>
</v-flex>
</v-layout>
</v-container>
</div>
解决方案
正如@Husam 提到的,Vue 不允许你这样做。它最终是最好的,甚至应该谨慎使用v-html。关于 css,来自 Vue.js 网站:
在单文件组件中,作用域样式不适用于 v-html 中的内容,因为 Vue 的模板编译器不会处理该 HTML。如果您想使用范围 CSS 来定位 v-html 内容,您可以改用 CSS 模块或具有手动范围策略(例如 BEM)的附加全局元素。
至于更好的方法,从您的输出外观来看,我建议将您的纯文本数据存储在数据库/集合中,并为此类帖子制作组件模板。在你的数据库/集合中,你可以存储标题、描述、imageURL,也许还有一个componentType。然后,在渲染时,您可以从 db 中存储的内容中渲染特定的组件类型。
这样会更清洁、更安全,也许更容易维护。我在 CodeSandbox 上创建了我正在谈论的内容的示例。沙盒正在阻止图像加载,但它就在那里。我也将您的输出分成两个不同的组件来查看。
推荐阅读
- multidimensional-array - VHDL无法初始化无符号向量数组
- laravel-5 - Mongodb和Mysql数据库的关系
- json - Unity JSON 与混合媒体二进制对象(如音频流缓冲区)
- java - 如何在 Spring MVC 应用程序中使用 OpenJDK 8 而不是 Oracle JDK 1.8?
- python - 如何通过python从mysql中检索零填充列?
- python - 将每个图像的尺寸导出到 Excel
- java - 在Java中获得所有可能组合的递归函数
- javascript - 获取所选电台的 3 个值 | JS
- junit - 如何执行参数化 Junit 测试用例
- node.js - 在我的 ubuntu 18.04 中为 ReactJS 设置环境时出错