집 >웹 프론트엔드 >JS 튜토리얼 >Vue2 탭에서 탭을 전환하는 방법

Vue2 탭에서 탭을 전환하는 방법

php中世界最好的语言원래의: 2018-03-10 13:53:123163검색

이번에는 Vue2 탭으로 탭을 전환하는 방법을 알려드리겠습니다. Vue2 탭을 사용하여 탭을 전환할 때 주의사항은 무엇인가요?

최근에 Vue를 배우고 있는데, 이해를 깊게 하기 위해 연습을 했습니다.

html: 구조는 매우 간단합니다.

js 코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>components</title>
    <script src="vue.js"></script>
    <style type="text/css">
        span{
            background:#ccc;
            padding:2px 5px;
            line-height:30px;
            text-align:center;
            cursor:pointer;
        }
        span.active{
            color:#fff;
            background:green;
        }
    </style>
</head>
<body>
    <div id="app">
        <component :is="who"></component>
        <span   :class="{active:active[key]}"   v-for="(item,key) in tab" @click="change(key)">{{item.content}} :{{key}}</span>
    </div>
</body>
</html>

전에도 예제를 만들었지만 코드가 상당히 지저분합니다. 이 코드는 v-for를 사용하여 단순화되었습니다.

포인트 1: v-for value-key의 순회 순서를 잊지 마세요.

포인트 2: 전역 API 정보 Vue.set( ); use;는 변경 메소드의 루프 후에 this.$set를 호출해야 합니다. 여기서 사용되는 약간의 트릭은 활성 상태의 값을 업데이트하는 방법입니다. 변경된 후

　　 항목을 추가합니다. 이 항목은 의미가 없지만 $set 메서드를 호출하여 Vue에 알립니다.

포인트 3: 구성 요소를 참조하는 방법은 다음과 같습니다. v-for가 통과하는 속성;이것은 편리합니다.

　　　　　　　　　　　　　　　사실 com1 com2 com3을 저장하기 위해 데이터 아래에 다른 변수를 쓰는 것은 적용되지 않습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 흥미로운 정보가 있으니 다른 PHP 중국어 웹사이트 관련 기사도 주목해 주세요!