vue 2.0 동적 구성 요 소 를 사용 하여 Tab 탭 전환 효과 구현(vue-cli)
이번에 완 성 된 기능 은 구성 요 소 를 간단하게 전환 하 는 것 일 뿐 이 고 경로 전환 을 사용 하려 면 주 소 를 바 꾸 는 것 이 약간 번 거 로 우 므 로 동적 구성 요 소 를 사용 하여 이 루어 집 니 다.대형 응용 프로그램 이 라면 vue-router 를 사용 하 는 것 이 편리 할 수 있 습 니 다.
먼저 최종 적 으로 실 현 된 효 과 를 살 펴 보고 구조 가 비교적 간단 하 며 상단 의 세 개의 Tab 라벨 은 전환 에 사용 되 며 내용 구역 은 각각 세 개의 키 구성 요소 입 니 다.
효과 미리 보기
핵심 코드 및 분석 은 다음 과 같다.
<template>
// tab ， tab
<div class="tabs">
<div class="tab" @click="toggleTab('prince')"><a> </a></div>
<div class="tab" @click="toggleTab('rose')"><a> </a></div>
<div class="tab" @click="toggleTab('fox')"><a> </a></div>
</div>
// ， tab
// is
// keep-alive
<prince :is="currentTab" keep-alive></prince>
</template>
<script>
//
import prince from './components/prince';
import rose from './components/rose';
import fox from './components/fox';
export default {
name: 'app',
data () {
return {
currentTab: 'prince' // currentTab
};
},
components: { //
prince,
rose,
fox
},
methods: {
toggleTab: function(tab) {
this.currentTab = tab; // tab
}
}
}
</script>
4
밤 을 들 어 라.보통 l 태그 에 li 태그 만 끼 워 넣 을 수 있 지만,우 리 는 지금 l 태그 에 사용자 정의 구성 요소 v-li 를 사용 하고 싶다.
<ul>
<v-li></v-li>
</ul>
<ul>
<li is="v-li"></li>
</ul>keep-alive 명령 은 전 환 된 구성 요 소 를 메모리 에 저장 할 수 있 으 며,상 태 를 유지 하거나 다시 렌 더 링 을 피 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
