vue2.0 tab切换，选项卡。

最新推荐文章于 2024-08-18 22:58:48 发布

mh_code

最新推荐文章于 2024-08-18 22:58:48 发布

阅读量1.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/ma_hao99/article/details/81450289

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li{list-style: none;}
        .tabbox{
            display: -webkit-flex;
            display: flex;
        }
        .tabli{
            width: 200px;
            background: lightblue;
            height: 34px;
            line-height: 34px;
            align-items: center;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="app">
       <ul v-bind:class='{tabbox:ulName}'>
           <li v-for='(item,index) in items'
               v-bind::key="item.id" 
               v-bind:class='{act:index==num,tabli:liName}'
               v-on:click='tab(index)'
           >{{item.message}}</li>
       </ul>
       <ul>
           <li v-for='(tab,index) in tabBox'
               v-bind::key="tab.id"
               v-show='index==num'
           >{{tab.message1}}</li>
       </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
       var vm = new Vue({
           el:'#app',
           data:{
               items:[
                   {message:1},
                   {message:2},
                   {message:3}
               ],
               num:0,
               liName:true,
               ulName:true,
               tabBox:[
                   {message1:'让我一个人'},
                   {message1:'我们是同类'},
                   {message1:'让我几个人醉'},
               ]
           },
           methods:{
               tab:function(index){
                  console.log(index)
                  this.num = index;
               }
           }
       })
    </script>
</body>
</html>