Vue-选项卡切换

 <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>
显示如下：
巴特西

Vue-选项卡切换

最新文章

热门文章
