Vue HTML注释处理 [英] Vue html comment handling

问题描述

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

I'm using Vue to produce some html template, I need to include the html conditional comments as per code below.

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代码也会被完全删除.

But when I open my html page in the browser the html code between the conditional comment is completely removed even though I actually need it to be there.

如何使Vue在模板的视图中包含这些注释?

How can I make Vue include these comments in the template's view?

推荐答案

在Vue 2.4.0+中，您可以设置 注释 选项 true .

In Vue 2.4.0+, you can set the comments option to true inside the component if you want to preserve comments in the component's template.

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

这篇关于Vue HTML注释处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！