새로운 요소/컴포넌트를 동적으로 추가하려면 appendChild와 동등한 Vue.js를 선택하십시오.
Vue.js에는var app = new Vue({...});컴포넌트가 있어요Vue.component('mycomponent', ...이러한 컴포넌트를 문제없이 사용할 수 있는 장소입니다.<mycomponent></mycomponent>html로 지정합니다.이 컴포넌트를 온 디맨드로 동적으로 추가하고 싶은 것은 버튼 클릭 후 또는 기타 이벤트가 발생했을 때입니다.raw JS에서는document.createElement...이벤트가 발생하고 나서el.appendChild..html에 추가합니다.Vue.js에서도 같은 작업을 수행할 수 있는 방법은 무엇입니까?
노드 js에서는 화려한 작업을 하고 있지 않습니다.이것은, 1 개의 html 페이지에 있습니다.<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>에서<head>.
이를 위해 "Vue way"에서는 일반적으로 원하는 작업에 따라 또는 를 사용합니다.
- 사용하다
v-if조건에 따라 컴포넌트/컴포넌트를 조건부로 표시합니다. - 사용하다
v-for컴포넌트/프로세서 목록을 렌더링합니다. - 사용하다
<component>동적 컴포넌트/트랜더를 렌더링합니다.
따라서 질문에서 설명한 내용을 달성하기 위해 부울 데이터 속성을 선언할 수 있습니다.visible다음과 같습니다.
data() {
return {
visible: false
}
}
와 함께 사용합니다.v-if템플릿에서 구성요소의 가시성을 제어하려면:
<mycomponent v-if="visible"></mycomponent>
이를 위해서는<mycomponent>템플릿에 존재합니다.표시할 컴포넌트의 종류를 모르는 경우 템플릿에 각 가능성을 포함시키고 특정 조건에 따라 원하는 컴포넌트를 표시할 수 있습니다.
<comp1 v-if="comp1Visible"></comp1>
<comp2 v-if="comp2Visible"></comp2>
<comp3 v-if="comp3Visible"></comp3>
또는 를 사용할 수 있습니다.<component>다른 데이터 속성(comp표시하는 컴포넌트의 이름으로 설정할 수 있습니다.
<component v-if="visible" :is="comp"></component>
설명 내용(document.createElement이어서el.appendChild)는 Vue에 존재하지 않습니다.Vue는 엄격한 렌더링 메커니즘을 가지고 있어 컴포넌트를 동적으로 인스턴스화하여 임의로 DOM에 고정할 수 없습니다.기술적으로는comp = new Vue()와 동등하게document.createElement그리고 나서.el.appendChild(comp.$el)그러나 데이터를 쉽게 전달할 수 없는 방법으로 수동으로 관리해야 하는 독립된 Vue 인스턴스를 생성해야 하기 때문에 이 작업을 수행할 수 없습니다.
언급URL : https://stackoverflow.com/questions/59701547/vue-js-equivalent-of-appendchild-to-dynamically-add-new-element-component
'programing' 카테고리의 다른 글
| C의 이중 포인터 연속성 경고 (0) | 2022.08.29 |
|---|---|
| 지도에서 반복 제거 (0) | 2022.08.29 |
| VueJs 2클릭이 작동하지 않는 것 같다 (0) | 2022.08.29 |
| JPA와 최대 절전 모드로 mapBy를 설명할 수 있는 사람? (0) | 2022.08.29 |
| 문자열이 null이 아니거나 비어 있지 않은지 확인합니다. (0) | 2022.08.29 |