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

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

:disabled="// !isValid"

与...具有相同的效果：

:disabled=""

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

Answer 2

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

假设您创建了一个名为<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>

var dt=[];
dt.push({id: "190", name: "Elurupadu"})
dt.push({id: "1230", name: "Sendhwa"})
dt.push({id: "1262", name: "Multai"})
dt.push({id: "1480", name: "Kherwara"})
dt.push({id: "2225", name: "Mandi"})
dt.push({id: "519", name: "Thamarassery"})
dt.push({id: "208", name: "Ayyampettai"})
dt.push({id: "5519", name: "Udaipur"})
dt.push({id: "26977", name: "Siddapura(Udupi)"})
dt.push({id: "1151", name: "Murthal"})
dt.push({id: "327", name: "Pillayarpatti"})
dt.push({id: "2022", name: "Siddapura"})
dt.push({id: "738", name: "Therthally"})
dt.push({id: "1112", name: "Chandigarh"})
dt.push({id: "2358", name: "Kadodra"})

//convert
var result=JSON.stringify(dt);
console.log(result);
/*[{"id":"190","name":"Elurupadu"},{"id":"1230","name":"Sendhwa"},{"id":"1262","name":"Multai"},{"id":"1480","name":"Kherwara"},{"id":"2225","name":"Mandi"},{"id":"519","name":"Thamarassery"},{"id":"208","name":"Ayyampettai"},{"id":"5519","name":"Udaipur"},{"id":"26977","name":"Siddapura(Udupi)"},{"id":"1151","name":"Murthal"},{"id":"327","name":"Pillayarpatti"},{"id":"2022","name":"Siddapura"},{"id":"738","name":"Therthally"},{"id":"1112","name":"Chandigarh"},{"id":"2358","name":"Kadodra"}]
*/

Answer 3

我得到了这些解决方案。我想到了解决方案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）来放入禁用的属性。

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

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

3 个答案: