注释掉Vue模板元素的一部分
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了注释掉Vue模板元素的一部分相关的知识，希望对你有一定的参考价值。
有时需要注释掉一些元素属性而不必记住它，以便在一些测试后快速恢复它。
使用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"来进行标记备份（或注释掉整个复制的元素）并继续尝试原始的
答案
我不认为你可以在组件标记中放置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', {
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>以上是关于注释掉Vue模板元素的一部分的主要内容，如果未能解决你的问题，请参考以下文章