如何使用 vue js 在 html 文件中包含不同的 html 文件？

Posted 2023-02-23

【中文标题】如何使用 vue js 在 html 文件中包含不同的 html 文件？

【英文标题】：How to include different html files inside a html file using vue js?

【发布时间】：2018-04-15 18:55:37

【问题描述】：

我知道使用 php 的 require_once() 但 php 不能在我的项目中使用。而且我还尝试了 w3-schools 的 w3-include，但在这种情况下，我的脚本没有加载。 当我也尝试通过 js 加载时，同样的事情发生了。我非常坚持procced。谁能帮我继续。

我用这个做js的

    <script> 
   $(function()
       $("#includedContent").load("b.html"); 
    );
   </script> 

对于我使用的 w3 学校

           <script>
          w3.includeHTML();
           </script>

这两个对我不起作用。请提供解决方案。能帮我用vue js就更好了？

【问题讨论】：

for js - 这取决于 jQuery 膨胀软件库 - 你用 jquery 膨胀你的 vue 了吗？

我正在使用 vue js 处理 ajax 请求

好的，只是更正了您的断言，即$("#includedContent").load("b.html"); 在某种程度上适用于“js”......它适用于使用 jquery bloat 的 js

你能推荐一个vue js中的方法

不，但是this may help

【参考方案1】：

您应该能够使用 ajax 获取 HTML 并将其设置为局部变量，然后使用 v-html 呈现它。

然而，这不是做事的好方法。 HTML 文件可能包含整个页面的标记，包括 html、body 和 head 标签，它们会弄乱您的标记。

如果在您的情况下，您有几个不同的 html 页面，其结构是事先已知的，您应该将它们用作 Vue 模板。 HTML 可以直接复制粘贴到 Vue 组件的模板中，就可以使用了。

另一方面，如果您想使用让您的用户编写 HTML 的东西，您应该将它存储在数据库中。例如，如果您有一个论坛，用户可以在其中撰写可以用 HTML 设置样式的帖子，您可以将单个帖子的标记保存在数据库中，然后获取它并使用 v-html 渲染它。