いくつかの要素属性を覚えておかなくても、いくつかのテストの後に素早く元に戻す必要がある場合があります。Vueテンプレート要素の一部をコメントアウトする
<my-comp id="my_comp_1"
v-model="value"
<!-- :disabled="!isValid" -->
@click="handleClick">
</my-comp>
（レンダリングエラーが発生します）全体の要素は、しかし、これは単一の属性では動作しませんHTMLの構文
<div>
<!-- <h2>Hello</h2> -->
<span>hi</span>
</div>
をコメントで達成可能である私が見ることができる最善のアプローチをコメントアウト
と以前に使用されていたのは、要素全体と設定をコピーしてタグバックアップを作成することでした（コピーされた要素全体をコメント化する）。
私は、あなたがHTML要素の開始タグの中にコメントを置くことができないのと同じ理由で、コンポーネントタグ内にHTMLコメントを入れることはできないと思います。いずれの状況でも有効なマークアップではありません。私はあなたが来ることができる最も近い引用符でコメントを配置することだと思う：
と同じ効果を持っているでしょう:disabled="// !isValid"
：あなたのコンポーネントは、その値が不足しているされて扱うことができるかどうかに応じて
:disabled=""
それはあなたのニーズに合うかもしれません。
コンポーネントの属性を削除する方法の1つは、カスタム属性を作成することです。
のは、あなたが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/[email protected]/dist/vue.js"></script>
<div id="app">
<my-component v-model='someValue' v-hide :disable='true'></my-component>
</div>