zoukankan      html  css  js  c++  java

  • 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.              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.              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>  
  • 相关阅读:
    REDIS缓存穿透，缓存击穿，缓存雪崩
    spring 自动装配
    SpringBoot @Condition
    【Azure 环境】在Azure虚拟机(经典) 的资源中，使用SDK导出VM列表的办法
    【Azure Developer】使用Microsoft Graph API 批量创建用户,先后遇见的三个错误及解决办法
    【Azure 环境】基于Azure搭建企业级内部站点, 配置私有域名访问的详细教程 (含演示动画)
    【Azure Function】Function App和Powershell 集成问题, 如何安装PowerShell的依赖模块
    【Azure 应用服务】Python3.7项目在引用pandas 模块后，部署报错 
    【Azure 应用服务】部署Azure Web App时，是否可以替换hostingstart.html文件呢？
    【Azure 应用服务】添加自定义域时，Domain ownership 验证无法通过 
  • 原文地址：https://www.cnblogs.com/daiwenru/p/7704747.html
Copyright © 2011-2022 走看看