Vue html 注释处理

Posted 2023-02-21

【中文标题】Vue html 注释处理

【英文标题】：Vue html comment handling

【发布时间】：2018-05-05 17:14:10

【问题描述】：

我正在使用 Vue 生成一些 html 模板，我需要按照下面的代码包含 html 条件 cmets。

var productTemplate = new Vue(
    el: '#myApp'
);

<script src="https://unpkg.com/vue@2.5.8/dist/vue.js"></script>

<div id="myApp">
    <div class="some-content">
        This is some content
    </div>

    <!--[if mso]>
      <div>
          this div will only be shown if the condition in the comment is true, in this case the condition is:
          if ( mso (microsoft office) == the html rendering engine) 
            show the html code between the [if mso] and the [endif]
          
      </div>
    <![endif]-->

    <div class="some-other-content">
        This is some content
    </div>
</div>

但是当我在浏览器中打开我的 html 页面时，条件注释之间的 html 代码被完全删除，即使我确实需要它。

如何让 Vue 在模板视图中包含这些 cmets？

【问题讨论】：

conditional comments 表示显示/隐藏？

分享更多详细信息和两个条件输出的示例？

添加了更多细节。

@user2486 这些条件 cmets：sitepoint.com/internet-explorer-conditional-comments

我不确定 vue 是否有问题：如果您删除 vue 脚本包含，问题是否仍然存在？

【参考方案1】：

在 Vue 2.4.0+ 中，如果要在组件的模板中保留 cmets，可以在组件内将 comments 选项设置为 true。

var productTemplate = new Vue(
    comments: true,  // <-- Add this
    el: '#myApp'
);

【讨论】：

你成就了我的一天

限制：此选项仅在完整版本中可用，在浏览器中编译。

他自己就是个传奇

【参考方案2】：

Vue 确实删除了 HTML 注释。

我能想到的一种方法是将你的 cmets 绑定在一个变量中，并通过 v-html 指令输出该变量。

编辑：我在错误的开发环境中对其进行了测试，所以这里是关于来自 Vue.js GitHub 问题的问题的链接。 https://github.com/vuejs/vue/issues/6177

var productTemplate = new Vue(
    el: '#myApp',
    comments: true,
    data: 
      comments: `    <!--[if mso]>
      <div>
          this div will only be shown if the condition in the comment is true, in this case the condition is:
          if ( mso (microsoft office) == the html rendering engine) 
            show the html code between the [if mso] and the [endif]
          
      </div>
    <![endif]-->`
    
);

<script src="https://unpkg.com/vue@2.5.8/dist/vue.js"></script>

<div id="myApp">
    <div class="some-content">
        This is some content
    </div>
    <!-- Comments -->
    <div v-html="comments">  comments  </div>

    <div class="some-other-content">
        This is some content
    </div>
</div>

【讨论】：

谢谢。这是满足我需求的最佳解决方案！

@CliffHelsel 很高兴它在 2 年后仍然有帮助。