本文介绍了Vue html 注释处理的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我正在使用 Vue 生成一些 html 模板，我需要按照下面的代码包含 html 条件注释.
var productTemplate = new Vue({埃尔:'#myApp'});<script src="https://unpkg.com/vue@2.5.8/dist/vue.js"></脚本><div id="myApp"><div class="一些内容">这是一些内容</div><!--[if mso]>只有当评论中的条件为真时才会显示此 div，在这种情况下，条件是:if ( mso (microsoft office) == html 渲染引擎) {显示 [if mso] 和 [endif] 之间的 html 代码}</div><![endif]--><div class="其他内容">这是一些内容</div></div>但是当我在浏览器中打开我的 html 页面时，条件注释之间的 html 代码被完全删除，即使我确实需要它.
如何让 Vue 在模板视图中包含这些注释?
解决方案
在 Vue 2.4.0+ 中，你可以设置 comments 如果你想在组件的模板中保留注释，则在组件内设置 true 选项.
var productTemplate = new Vue({comments: true,//<-- 添加这个埃尔:'#myApp'});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>
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.
How can I make Vue include these comments in the template's view?
解决方案
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 注释处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！