Vue html 评论处理

Question

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

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 在模板视图中包含这些评论？

Answer 1

~~Vue 确实删除了 HTML 评论。~~

我能想到的一种方法是将您的注释绑定到一个变量中，然后通过 v-html 指令输出该变量。

编辑：我在错误的开发环境中对其进行了测试，所以这里是 link 关于 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>

Answer 2

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

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

Vue html 评论处理

Vue html comment handling

html

tags

comments

conditional-comments

vue.js