뷰 케이스 목록 애니메이션 예

<! DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 선두 > 
  < 메타 캐릭터 = "UTF-8" > 
  < 메타 이름 = "뷰포트" 콘텐츠 = "폭 = 기기 폭 초기 스케일 = 1.0" > 
  < 메타 HTTP -equiv = "X-UA-지원" 내용 = "즉 = 엣지" > 
  < 제목 > 문서 </ 제목 > 
  < 스크립트 SRC = "./ lib 디렉토리 / VUE-2.4.0.js" > <
  > 
    리 { 
      국경 : 1 픽셀의 점선 # 999 ; 
      여백 : 5px ; 
      라인 높이 : 35px ; 
      패딩 왼쪽 : 5px ; 
      폰트 크기 : 12 픽셀 ; 
      폭 : 100 % ; 
    } 

    리 : 가져가 { 
      배경 컬러 : hotpink ; 
      전환 : 모든 0.8S 쉽게 ; 
    } 



    , .V-입력 
    .V는-떠나-에 { 
      불투명 :0 ; 
      변형 : translate Y를 (80 픽셀)를 ; 
    } 

    .V-액티브 입력 
    .V-가 떠나 활성 { 
      전환 : 모두 0.6s 용이성 ; 
    } 

    / * 다음 .V-이동과 함께 떠날-활성을 .V, 리스트의 가능한 후속 요소들은 점차 효과가 드리프트 * / 
    .V-이동 { 
      전환 : 모두 0.6s EASE ; 
    } 
    .V-남겨 액티브 { 
      위치 : 절대 ; 
    } 
  </ 스타일 > 
</ 헤드 > 

< 본문 > 
  < DIVID = "응용 프로그램" > 

    < DIV > 
      < 레이블 > 
        ID : 
        < 입력 유형 = "텍스트" V-모델 = "ID" > 
      </ 라벨 > 

      < 라벨 > 
        이름 : 
        < 입력 유형 = "텍스트" V-모델 = " 이름 " > 
      </ 라벨 > 

      < 입력 타입 ="버튼 " 값 ="添加" @click =" "추가 > 
    </ DIV > 

    <! - <UL> -> 
      <! -전환 목록을 구현할 때 전환 요소를 필요한 경우, 루프에서 V-에 의해 렌더링되는, 당신은 transitionGroup 전환 패키지가 필요합니다 사용할 수 없습니다 -> 
      <! - 당신은 V-에 대한 순환을 위해 만들려면 요소 애니메이션 각 요소에 대해 설정해야합니다 : 키 속성 -> 
      <! - 바로 그 때 입학 시간 효과 페이지를 달성하기 위해 속성을 추가 나타나는 그룹을 ransition에 표시 -> 
      <! - 로 전환 그룹의 요소로 태그 속성 설정, 라벨 범위로 렌더링 태그 속성 디폴트를 지정하지 않으면 전이 족 원소, 렌더링 지정된 지정 > - 
      < 전이 그룹 태그 나타나는 = "UL" > 
        < 리튬 V-용 = "(아이템 , I) 목록은 " : 키 ="item.id " @click ="델 (I) " > 
          {{}} ---, item.name을 item.id에 대한 {{}} 
        </ 리 >
      </ 전이 족> 
    <! - </ UL> -> 

  </ DIV > 

  < 스크립트 > 
    // , 뷰 인스턴스를 만들기 뷰 모델을 제공하는 
    VAR VM =  새로운 새로운 뷰 ({ 
      EL : ' #app ' , 
      데이터 : { 
        ID를 : '' , 
        이름 : '' , 
        [목록 
          {ID 1. : 이름 ' 조고 ' }, 
          {ID : 2 , 이름 : ' 진회 ' }, 
          {ID 3. ,이름:' 严嵩' }, 
          {ID : 4 , 이름 : ' 魏忠贤' } 
        ] 
      } 
      : 방법 { 
        {) (ADD 
          이 ({ID .list.push 이 : .ID 이름 이 .name을)}
           이 .ID =을  이 .name을 =  ' 
        }, 
        델 (I) { 
          이 .list.splice을 (I, 1 ) 
        } 
      } 
    }); 
  </ 스크립트 > 
</ 몸 > 

</ HTML>