반응형
Vue JS 2에서 부모 요소 태그를 동적으로 변경합니다.
프로포트의 내용을 동일하게 유지하면서 조건부로 다른 부모 요소 간에 전환하려면 어떻게 해야 합니까?
예:한다면Item가지다isRouter소품, 렌더링router-link필요한 속성을 가진 경우, 그렇지 않으면 단순하게 렌더링됩니다.li요소.
/* Item.vue */
<router-link v-if="isRouter" tag="li" :to="to" active-class="is-active">
<li v-else>
/* some html */
<slot></slot>
/* more html */
</li>
</router-link>
// View.vue
<list>
<item isRouter to="/new">
Breaking News
</item>
<item>
Orange
</item>
</list>
이게 가능한가요?어떤 방법을 택하면 좋을까요?
좋아, 네가 원하는 걸 할 수 있는 방법을 찾았어!
vue의 사용component태그와vbind:is속성(또는:is속기)
<component :is="isRouter ? 'router-link' : 'li'" :to="to">
<!-- repeated content -->
<slot></slot>
<!-- more repeated content -->
</component>
그:is속성을 계산된 속성에 위임할 수 있습니다.그리고 당신이 전달하고 싶은 소품들은router-link에 대해 정의해야 합니다.component태그 단, 이러한 조건도 사용할 수 있습니다.li.
여기서 찾았습니다.https://vuejs.org/v2/guide/components.html#Dynamic-Components
자세한 내용이 필요한 경우 동적 구성 요소에 대한 자세한 내용을 볼 수 있는 링크도 있습니다.
언급URL : https://stackoverflow.com/questions/51293489/dynamically-change-parent-element-tag-on-vue-js-2
반응형
'itsource' 카테고리의 다른 글
| 버퍼 오버플로를 활성화하기 위해 gcc 컴파일러 최적화를 해제하는 방법 (0) | 2022.08.27 |
|---|---|
| C 컴파일러를 C로 작성하려면 어떻게 해야 합니까? (0) | 2022.08.27 |
| 복사-붙여넣기 링크가 제대로 작동하는 동안 링크가 작동하지 않음 (0) | 2022.08.27 |
| Java에서 별도의 스레드를 사용하여 메서드를 호출하려면 어떻게 해야 합니까? (0) | 2022.08.27 |
| 구성 요소의 html 요소 유형 변경 (0) | 2022.08.27 |