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

Question

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

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

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

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

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

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

Answer 1

我得到了这些解决方案。我想到了解决方案1。

起始代码：

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

需要禁用的Vue指令HTML属性：@click="foo.on = !foo.on"

最终的 div 标签将如何运行：

<div 
v-for="foo in foos" 
:key="foo.id" 
>

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

溶胶。 1：我做了一个新的v-bind属性（:lang）把disabled属性放进去。

: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>

溶胶。 4：<!-- @click="foo.on = !foo.on" -->

Answer 2

删除/隐藏组件属性的一种方法是为其创建自定义指令。

假设您创建了一个名为 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', {
  template: `<p> A custom template </p>`
})

Vue.directive('hide', {
  inserted: function (el) {
   console.log('el before hide', el)
    while(el.attributes.length > 0)
    el.removeAttribute(el.attributes[0].name);
    console.log('el after hide', el)
  }
})

new Vue({
  el: '#app',
  data () {
    return {
      someValue: 'Hello'
    }
  }
})

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>

<div id="app">
  <my-component v-model='someValue' v-hide :disable='true'></my-component>
</div>

Answer 3

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

:disabled="// !isValid"

效果与以下相同：

:disabled=""

根据您的组件是否可以处理丢失的值，这可能符合您的需求。