注释掉一部分Vue模板元素 [英] Comment out a part of Vue template element

问题描述

有时需要将某些元素属性注释掉而不必记住它，以便在一些测试后快速恢复.

可以使用 HTML 注释语法来注释整个元素

<!-- <h2>你好</h2>--><span>hi</span>

但是这不适用于单个属性(导致渲染错误)

@click="handleClick"></my-comp>

我之前看到和使用的最佳方法是通过复制整个元素和设置 v-if="false" 来制作标签备份(或注释掉整个复制的元素)并继续用原来的试试

解决方案

我不认为您可以将 HTML 注释放入组件标签中，原因与您不能将注释放入 HTML 元素开始标签中的原因大致相同.在任何一种情况下，它都不是有效的标记.我认为您最接近的是将评论放在引号中:

:disabled="//!isValid"

效果与:

:disabled=""

取决于您的组件是否可以处理丢失的值，这可能适合您的需求.

Sometimes it is needed to comment out some element attribute without having to remember it in order to restore it quickly after some tests.

Commenting out whole element is achievable with HTML commenting syntax

<div>
    <!-- <h2>Hello</h2> -->
    <span>hi</span>
</div>

However this won't work with a single attribute (causes rendering error)

<my-comp id="my_comp_1"
         v-model="value"
         <!-- :disabled="!isValid" -->
         @click="handleClick">
</my-comp>

The best approach I could see and used before was to make a tag backup by copying whole element and settings v-if="false" for it (or comment out whole copied element) and continue to experiment with original one

解决方案

I don't think you can put an HTML comment inside a component tag, for much the same reason you can't put comments inside an HTML element opening tag. It's not valid markup in either situation. I think the closest you could come would be to place the comment in the quotes:

:disabled="// !isValid"

Which would have the same effect as:

:disabled=""

Depending on whether your component can handle that value being missing, that might fit your needs.

这篇关于注释掉一部分Vue模板元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！