일부 요소 속성을 주석 처리하여 일부 테스트 후에이를 신속하게 복원해야 할 경우가 있습니다. 전체 요소를 언급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>
내가 볼 수있는 가장 좋은 방법과와 달성 전에 사용 된 전체 요소 및 설정을 복사하여 태그 백업을 만드는 것입니다 (또는 전체 복사 된 요소를 주석으로 처리). 원래의 태그로 실험을 계속하십시오.
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/[email protected]/dist/vue.js"></script>
<div id="app">
<my-component v-model='someValue' v-hide :disable='true'></my-component>
</div>