집 >웹 프론트엔드 >JS 튜토리얼 >Vue 탭 구현 및 전환 기능에 대한 자세한 설명

Vue 탭 구현 및 전환 기능에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-27 09:36:064693검색

이번에는 Vue에서 탭 및 전환 기능을 구현하는 방법에 대해 자세히 설명하겠습니다. Vue에서 탭 및 전환 기능을 구현하는 방법에 대한 노트는 무엇입니까?

여기에서는 Vue 문서의 일부 지침 사용법이나 기본 지식을 다루지 않을 것입니다. 우리는 시작부터 실제 전투로 진행하기 때문에 일일 프로젝트에서 달성해야 하는 일부 효과를 다음과 같이 직접 분할하겠습니다. 모듈. 관련 지침을 접하거나 사용 방법을 모르는 경우 문서를 직접 확인한 다음 구현 코드를 다시 살펴보세요. Vue 문서를 읽는 것이 정말 중요하다는 것을 기억하세요. 매우 중요합니다!

여기서 Vue는 단일 파일 형태로 소개됩니다. 게다가 코드는 구현 과정에서 단계별로 최적화될 예정이니 걱정하지 마세요!

아래는 약간 보기 흉한 스타일이지만 기능은 괜찮은 탭입니다.

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8" />  
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">   
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"> 
  <meta name="apple-mobile-web-app-title" content="Vue选项卡"> 
  <title>Vue实现选项卡</title> 
  <script type="text/javascript" src="../js/vue.js"></script> 
 </head> 
 <style> 
  * { 
   padding: 0; 
   margin: 0; 
  } 
  .box { 
   width: 800px; 
   height: 200px; 
   margin: 0 auto; 
   border: 1px solid #000; 
  } 
  .tabs li { 
   float: left; 
   margin-right: 8px; 
   list-style: none; 
  } 
  .tabs .tab-link { 
   display: block; 
   width: 250px; 
   height: 49px; 
   text-align: center; 
   line-height: 49px; 
   background-color: #5597B4; 
   color: #fff; 
   text-decoration: none; 
  } 
  .tabs .tab-link.active { 
   height: 47px; 
   border-bottom: 2px solid #E35885; 
   transition: .3s; 
  } 
  .cards { 
   float: left; 
  } 
  .cards .tab-card { 
   display: none; 
  } 
  .clearfix:after { 
   content: ""; 
   display: block; 
   height: 0; 
   clear: both; 
  } 
  .clearfix { 
   zoom: 1; 
  } 
 </style> 
 <body> 
  <p id="app" class="box"> 
   <ul class="tabs clearfix"> 
    <li v-for="(tab,index) in tabsName"> 
     <a href="#" rel="external nofollow" class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a> 
    </li> 
   </ul> 
   <p class="cards"> 
    <p class="tab-card" style="display: block;">这里是HTML教程</p> 
    <p class="tab-card">欢迎来到CSS模块</p> 
    <p class="tab-card">嗨，这里是Vue</p> 
   </p> 
  </p> 
 </body> 
 <script> 
  var app = new Vue({ 
   el: "#app", 
   data: { 
    tabsName: [{ 
     name: "HTML", 
     isActive: true 
    }, { 
     name: "CSS", 
     isActive: false 
    }, { 
     name: "Vue", 
     isActive: false 
    }], 
    active: false 
   }, 
   methods: { 
    tabsSwitch: function(tabIndex) { 
     var tabCardCollection = document.querySelectorAll(".tab-card"), 
      len = tabCardCollection.length; 
     for(var i = 0; i < len; i++) { 
      tabCardCollection[i].style.display = "none"; 
      this.tabsName[i].isActive = false; 
     } 
     this.tabsName[tabIndex].isActive = true; 
     tabCardCollection[tabIndex].style.display = "block"; 
    } 
   } 
  }) 
 </script> 
</html>

1세대 탭의 구현도 이와 같으며 추후 개선될 예정입니다. 위는 코드이고, 다음은 렌더링입니다! 이제 막 Vue를 배우기 시작했고 몇 가지 프로젝트를 진행했습니다. 궁금한 점이 있으면 함께 논의하고 진행해보겠습니다. 비공개 메시지를 보내주세요!

Vue는 탭 전환을 구현합니다. 구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>选项卡</title>
 <script src="../js/vue.js"></script>
 <style>
  li{
   list-style: none;
   float: left;
   margin-right: 20px;
  }
 </style>
</head>
<body>
 <p class="app">
  <ul>
   <li v-for="(item,index) in list" @click="tab(index)">{{item.tab}}
    <p v-show="item.show">
     {{item.title}}
    </p>
   </li>
  </ul>
 </p>
 <script>
  let obj=[
   {"tab":"选项一","show":true,"title":"1111"},
   {"tab":"选项二","show":false,"title":"2222"},
   {"tab":"选项三","show":false,"title":"3333"}
  ];
  var vm=new Vue({
   el:".app",
   data:{
    list:obj
   },
   methods:{
    tab:function(index){
     for(var i=0;i<this.list.length;i++){
      this.list[i].show=false;
      if(i==index){
       this.list[index].show=true;
      }
     }
    }
   }
  })
 </script>
</body>
</html>

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. PHP 중국어 웹사이트의 기사!

Vue 탭 구현 및 전환 기능에 대한 자세한 설명

관련 기사