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 2.4.0+中,如果要在组件的模板中保留注释,可以将comments选项设置为true组件内部.

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