Syntax 注释掉Vue模板元素的一部分

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

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

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

你好

但是，这不适用于单个属性（导致渲染错误）

---

我认为不能将HTML注释放在组件标记内，原因与不能将注释放在HTML元素开始标记内的原因大致相同。这两种情况下都不是有效的标记。我认为你最接近的方式是将评论放在引号中：

:disabled="// !isValid"

其效果与：

:disabled=""

根据组件是否能够处理丢失的值，这可能符合您的需要。
删除/隐藏组件属性的一种方法是为其创建自定义指令

假设您创建了一个名为
v-hide
的指令，并将其作为以下内容放入组件中：

<my-comp  v-model="value" @click="handleClick" v-hide :disable='true'></my-comp> 



其结果是：

<my-comp  v-model="value" @click="handleClick"></my-comp> 



以下是一个工作示例：


Vue.component（'my-component'）{
模板：`自定义模板
`
})
Vue.directive（'hide'{
插入：功能（el）{
console.log（'el-before-hide'，el）
而（el.attributes.length>0）
el.removeAttribute（el.attributes[0].name）；
console.log（'el-after-hide'，el）
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
someValue:“你好”
}
}
})
我找到了这些解决方案。我想到了解决方案1

起始代码：

<div 
v-for="foo in foos" 
:key="foo.id" 
@click="foo.on = !foo.on /* JavaScript comment. */"
>
  <label>
    {{ foo.name }} {{foo.on}}
  </label>
</div>

解决方案1和2将禁用的属性保留在其标记内。我没有找到一个好方法来制作“原始字符串”。要在标记中保留该属性，外部引号和内部引号必须不同

索尔。1：我创建了一个新的v-bind属性（
：lang
）来放入禁用的属性

:lang='en  /* @click="foo.on = !foo.on" */'

索尔。2：选择一个Vue指令。将属性放入

v-for="foo in foos /* @click='foo.on = !foo.on' */"

解决方案3和4将属性放在标记之外

索尔。3：

<div v-if="false">
  @click="foo.on = !foo.on"
</div>


@单击=“foo.on=！foo.on”

索尔。4:
我同意这会很有用。真遗憾，这不可能。模板语法和HTML标记之间已经存在差异，例如区分大小写和结束标记。允许在开始标记中使用
（以及更方便的
/
和
/***/
）样式的注释将非常简单。在版本2.6.11中，解决方案的概念使用不同的语法：disabled=“false/*！isValid*/”
v-for="foo in foos /* @click='foo.on = !foo.on' */"

<div v-if="false">
  @click="foo.on = !foo.on"
</div>