vue 选项卡（转载）

  1. !DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="utf-8" />        
  6.         <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">          
  7.         <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">  
  8.         <meta name="apple-mobile-web-app-title" content="Vue选项卡">  
  9.         <title>Vue实现选项卡</title>  
  10.         <script type="text/javascript" src="../js/vue.js"></script>  
  11.     </head>  
  12.     <style>  
  13.         * {  
  14.             padding: 0;  
  15.             margin: 0;  
  16.         }  
  17.           
  18.         .box {  
  19.             width: 800px;  
  20.             height: 200px;  
  21.             margin: 0 auto;  
  22.             border: 1px solid #000;  
  23.         }  
  24.           
  25.         .tabs li {  
  26.             float: left;  
  27.             margin-right: 8px;  
  28.             list-style: none;  
  29.         }  
  30.           
  31.         .tabs .tab-link {  
  32.             display: block;  
  33.             width: 250px;  
  34.             height: 49px;  
  35.             text-align: center;  
  36.             line-height: 49px;  
  37.             background-color: #5597B4;  
  38.             color: #fff;  
  39.             text-decoration: none;  
  40.         }  
  41.           
  42.         .tabs .tab-link.active {  
  43.             height: 47px;  
  44.             border-bottom: 2px solid #E35885;  
  45.             transition: .3s;  
  46.         }  
  47.           
  48.         .cards {  
  49.             float: left;  
  50.         }  
  51.           
  52.         .cards .tab-card {  
  53.             display: none;  
  54.         }  
  55.           
  56.         .clearfix:after {  
  57.             content: "";  
  58.             display: block;  
  59.             height: 0;  
  60.             clear: both;  
  61.         }  
  62.           
  63.         .clearfix {  
  64.             zoom: 1;  
  65.         }  
  66.     </style>  
  67.   
  68.     <body>  
  69.         <div id="app" class="box">  
  70.             <ul class="tabs clearfix">  
  71.                 <li v-for="(tab,index) in tabsName">  
  72.                     <a href="#" class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}">{{tab.name}}</a>  
  73.                 </li>  
  74.             </ul>  
  75.   
  76.             <div class="cards">  
  77.                 <div class="tab-card" style="display: block;">这里是HTML教程</div>  
  78.                 <div class="tab-card">欢迎来到CSS模块</div>  
  79.                 <div class="tab-card">嗨，这里是Vue</div>  
  80.             </div>  
  81.         </div>  
  82.     </body>  
  83.   
  84.     <script>  
  85.         var app = new Vue({  
  86.             el: "#app",  
  87.             data: {  
  88.                 tabsName: [{  
  89.                     name: "HTML",  
  90.                     isActive: true  
  91.                 }, {  
  92.                     name: "CSS",  
  93.                     isActive: false  
  94.                 }, {  
  95.                     name: "Vue",  
  96.                     isActive: false  
  97.                 }],  
  98.                 active: false  
  99.             },  
  100.             methods: {  
  101.                 tabsSwitch: function(tabIndex) {  
  102.   
  103.                     var tabCardCollection = document.querySelectorAll(".tab-card"),  
  104.                         len = tabCardCollection.length;  
  105.   
  106.                     for(var i = 0; i < len; i++) {  
  107.                         tabCardCollection[i].style.display = "none";  
  108.                         this.tabsName[i].isActive = false;  
  109.                     }  
  110.                     this.tabsName[tabIndex].isActive = true;  
  111.                     tabCardCollection[tabIndex].style.display = "block";  
  112.                 }  
  113.             }  
  114.         })  
  115.     </script>  
  116.   
  117. </html>  
posted @ 2017-10-21 14:40  daidai201  阅读(254)  评论(0)  编辑  收藏  举报