Vue-选项卡切换

程序员雅茹技术 2022年11月14日

0 收藏 314 点赞 3,036 浏览 907 个字

 <html>
   <head>
     <title>Vue实现tab切换效果</title>
     <script src="vue.js"></script>
     <style type="text/css">
      *{
         margin:0;
         padding:0;
      }      #tab{
         width:368px;
         height:200px;
         border:1px solid #ccc;
         margin:20px auto;
      }      ul li {
         float:left;
         list-style:none;
         width:90px;
         height:30px;
         text-align:center;
         line-height:30px;
         border:1px solid #ccc;
      }      ul li:hover{
         cursor:pointer
      }      .active {
         color:red;
      }      .tabCon {
         clear:left;
         padding:4px 0 0 6px;
      }
     </style>
   </head>
   <body>
     <div id="tab">
       <ul>
         <li
         v-for="(tab, index) in tabs"
         :class="{active:index == nowIndex}"
         @click="tabToggle(index)">
           {{ tab }}
         </li>
       </ul>
       <div class="tabCon">
         <div class="divTab" v-show="nowIndex === 0">内容一</div>
         <div class="divTab" v-show="nowIndex === 1">内容二</div>
         <div class="divTab" v-show="nowIndex === 2">内容三</div>
         <div class="divTab" v-show="nowIndex === 3">内容四</div>
       </div>
     </div>
     <script>
      new Vue({
        el:"#tab",
        data:{
          tabs:["新闻排行","图片排行","视频排行","游戏排行"],
          nowIndex:0
        },
        methods:{
          tabToggle:function(index){
             this.nowIndex = index;
          }
        }
      })     </script>
   </body>
 </html>