Vue htmlコメント処理

Question

私はいくつかのhtmlテンプレートを生成するためにVueを使用していますが、私は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コードは、私が実際にそれはそこにする必要があるにもかかわらず、完全に除去します。

これらのコメントをテンプレートビューに含めるにはどうすればよいですか？

Answer 1

あなたは、コンポーネントのテンプレートにコメントを残したい場合は、コンポーネント内のtrueにcommentsオプションを設定することができます。

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

Answer 2

ビューは、HTMLコメントを削除します。

私が考えることの1つは、あなたのコメントを変数にバインドし、変数をv-htmlディレクティブを通して出力することです。

EDIT：間違ったdev envでテストしましたので、Vue.js GitHubの問題に関するリンクがあります。 Vueの2.4.0+で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>