---------------------- HTML, JS, 스타일 ----------------------- ------------------------
<! DOCTYPE HTML>
<HTML>
<HEAD>
<메타 문자 집합 = "UTF-8"/>
<링크 확인해 = "스타일"유형 = "텍스트 / CSS는"HREF = "index.css"/>
<스크립트 SRC = " vue.js "> </ script>
</ head>
<body>
<div>
<H1> -在动态组件上使用유지 (keep-alive) - </ H1>
<DIV ID ="예 1 "클래스 ="데모 " >
<버튼
클래스 = "동적 컴포넌트 데모 탭 버튼"
V-용 = "탭의 탭"
V-바인딩 : 클래스 = "{"동적 컴포넌트 데모 활성 '탭 ==='포스트 ' } "
V-에 = "currentTab = 탭"를 클릭
>
{{탭}}
</ 버튼>을
<- - 킵 얼라이브 태그를 분리 한 경우, 및 아카이브 포스트가없는 다른 캐시로 직접 전환 할 때>
<킵 얼라이브>
<V 컴포넌트 bind- :은 = "currentTabComponent"> </ 부품>
< / 연결 유지>
</ div>
<script>
Vue.component ( '탭으로 포스트'{
데이터 : 함수 () {
창 {
포스트 : [
{
ID :. 1
제목 : "고양이 Ipsum의 '
내용 : 폭풍이 통과하는 '<p> 망가, 비의 춤은 쓰레기가 한 번 밖에 할 수 오늘 수요 나의 주인과는 아무 싶어하지 않으며, 내가 생각 나를 기다릴 소유자를 기대하기로 결정 킥 기다려 그것은 고양이 고양이 음메 음메 핥기 귀를 핥아 발 때문에, 밈을 귀여운 얼굴을하지만, 다른 고양이를 핥아. 키티 poochy 체이스 가상의 버그가 있지만 컴퓨터 화면 앞에 서있다. 달콤한 동물 고양이 개 증오 마우스에는 화장실이 모든 기니피그 응시 싫어 문자열 발프 베개를 먹는다. 그대로 내 왼쪽 도넛이없는, 나의 권리는 양탄자 고양이에 돌진하지 고양이 엉덩이를 주위 싫어, 싫어 그것을 사랑, 그것을 사랑 </ P> '.
},
{
ID : 2,
제목 :'소식통 Ipsum 제품 '
내용 : '<p> 윅 파란색 병 scenester의 헬 베티 우, MEH 네 loko. 거기에 lumbersexual 프란 젠의 초라한 세련된, 거리 예술 knausgaard 신탁 기금 무당의 scenester 라이브 에지 믹스 테이프의 박제 바이러스 yuccie의 다육 식물을 새를 넣습니다. 숄더 키보드 자전거 권한, 십자가 거리 예술 NEUTRA 공기 공장 PBR & B 까마귀 격자 무늬 venmo을 찌를. 물결표 장식이 예술 파티 엉덩이 팩 비닐 활자 venmo 진 반바지 mumblecore를 겨. 부사장은 mlkshk snackwave, 까마귀 공예 맥주 다음 단계 MIGAS 8 비트 연두색을 차지 문신 gentrify 블로그. 신탁 기금 음식 트럭 마시는 식초 고추장 </ P> '.
},
{
ID : 3,
제목 :'먹고 Ipsum 제품 '
내용 : '<p> 입힌 디저트 수플레 롤리팝 초콜릿 바 달콤한 타르트 케이크 추파의 춥스. 수플레 사탕 젤리 콩 토피 사탕 먹고 입힌 맛있게 크로. 머핀 케이크 푸딩 수플레 웨이퍼 젤리 곰의 발톱 참깨는 마시멜로를 스냅. 마지 판 수플레 크로 레몬 진저 설탕 매화 레몬 사과 파이의 gummies 방울. 달콤한 롤 도넛 귀리 케이크 토 피 케이크입니다. 감초 사탕 마카롱 토 피 쿠키 사탕 </ P> '.
}
],
selectedPost : 널 (null)
}
}
템플릿 :'\
<DIV 클래스 = "동적 구성 요소 데모 게시물 탭"> \
<UL 클래스 = "
<리 \의
\ V-에 대한 = "포스트에서 포스트"
키 = "post.id"\ V-바인드
V-바인딩 : 클래스 = "{\ '동적 구성 요소 데모 활성 \'포스트 === selectedPost } "\
: selectedPost = 후 V-에 =을 클릭하십시오", "\
> \
{{post.title}} \
</ 리> \
</ UL> \
<DIV 클래스 ="동적 구성 요소 데모 후 용기 " > \
<DIV \
V-IF = "selectedPost"\
클래스 = "동적 구성 요소 데모 포스트"\
> \
<H3> {{selectedPost.title}} </ H3는> \
<DIV V-HTML = "selectedPost.content"> </ DIV> \
</ DIV> \
<강력한 V-다른> \
블로그에 클릭 왼쪽에 제목을 볼 수 \.
</ STRONG> \
</ DIV> \
</ DIV> \
'
})
Vue.component ('탭 아카이브 ', {
템플릿 :'. <div> 아카이브 구성 요소 </ DIV > '
})
바르 예 1 = 새로운 뷰 ({
그는 '#의 예 1',
날짜 {
currentTab '포스트'
탭 [ '포스트', '보관']
}
계산 {
currentTabComponent : 함수 () {
창 '탭 -'+ this.currentTab.toLowerCase ()
}
}
})
</ script>
< 스타일>
.dynamic 구성 요소 - 데모 탭 버튼 {
패딩 : 6 픽셀 10px;
국경 왼쪽 상단 반경 : 3px의;
국경 - 오른쪽 상단 - 반경 : 3px의;
국경 : 1 픽셀의 고체 #ccc;
커서 : 포인터;
배경 : # f0f0f0;
마진 - 하단 : -1px;
}
.dynamic 구성 요소 - 데모 탭 버튼 : 가져가 {
배경 : # e0e0e0;
}
.dynamic 구성 요소 - 데모 탭 button.dynamic 구성 요소 - 데모 활성 {
배경 : # e0e0e0;
}
.dynamic 구성 요소 - 데모 탭 {
국경 : 1 픽셀의 고체 #ccc;
패딩 : 10px;
}
.dynamic 구성 요소 - 데모 게시물 탭 {
디스플레이 : 플렉스;
}
.dynamic 구성 요소 - 데모 - 게시물 - 사이드 바 {
최대 폭 : 40vw;
마진 :! 0 중요합니다;
패딩 :! 0 10px 0 0 중요합니다;
목록 스타일 타입 : 없음;
국경 오른쪽 : 1 픽셀의 고체 #ccc;
}
.dynamic 구성 요소 - 데모 - 게시물 - 사이드 바 리 {
공백 : 파라미터 nowrap;
텍스트 오버 플로우 : 줄임표;
오버 플로우 : 숨겨진;
커서 : 포인터;
}
.dynamic 구성 요소 - 데모 - 게시물 - 사이드 바 리 : 가져가 {
배경 : #eee;
}
.dynamic 구성 요소 - 데모 - 게시물 - 사이드 바 li.dynamic 구성 요소 - 데모 활성 {
배경 : 연한 파랑;
}
.dynamic 구성 요소 - 데모 후 용기 {
패딩 왼쪽 : 10px;
}
.dynamic 구성 요소 - 데모 포스트> : 첫 아이 {
마진 - 최고! 0 중요합니다;
패딩 탑 :! 0 중요합니다;
}
</ 스타일>
</ DIV>
</ BODY>
</ HTML>
----------------------- 분할 선 ------------------------- ----
효과 다이어그램을 실행합니다 :
