Vue制作tab选项栏

最新推荐文章于 2023-04-18 09:36:23 发布

原创最新推荐文章于 2023-04-18 09:36:23 发布 · 359 阅读

1 ·

CC 4.0 BY-SA版权

我的Vue旅程专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Vue.js框架创建动态的选项卡切换功能，通过组件化开发，实现Tab栏的增删及内容切换，涉及Vue实例、数据绑定、事件处理等核心概念。

<style>
        * {
            padding: 0;
            margin: 0;
        }
        .tab li{
            list-style: none;
            display: inline-block;
            border: 1px solid black;
            text-align: center;
            line-height: 50px;
            width: 50px;
        }
        .tab div {
            /*把div隐藏起来*/
            display: none;
            width: 156px;
            background-color: black;
            color: #fff;
            text-align: center;
            line-height: 150px;
        }
        .tab div.current {
            /*给div添加类，不要隔开，div.current之间没有空格*/
            /*显示div*/
            display: block;
        }
        .active {
            background-color: darkorange;
        }
    </style>
</head>
<body>
<div id="demo">
    <!--1.先用静态标签来构建页面
        2.然后用vue.js来重构-->
    <div class="tab">
        <ul>
            <li @click="shift(index)" :class="currentIndex == index?'active':''" :key="index" v-for="(item, index) in fruit">{{ item.title }}</li>
            <!--通过三元运算符来判定，currentIndex是否和当前索引一致，一致就添加active类，不一致就啥都不加
                剩下的通过click事件操作。shift(index),index是当前index，传过去和currentIndex比较，一致就添加类-->
        </ul>
        <div :class="currentIndex == index?'current':''" :key="index" v-for="(item, index) in fruit">{{ item.info }}</div>
        <!--通过三元运算符来判定，currentIndex是否和当前索引一致，一致就添加current类，不一致就啥都不加-->
    </div>
</div>
<script>
    var v = new Vue({
        el:"#demo",
        data: {
            currentIndex:0, //把第一个元素设为当前元素
          fruit:[
              {
                  title:"苹果",
                  info:"好吃，来自大东北"
              },
              {
                  title:"芒果",
                  info:"好吃，热带水果"
              },
              {
                  title:"木瓜",
                  info:"好吃，我的最爱"
              }
          ]
        } ,
        methods: {
            shift:function (index) {        //这个index是用来接收上面shift（index）的值的，然后赋给currentIndex，然后currentIndex再和上面的index进行比较
                this.currentIndex = index ;
            }
        }
    })
</script>

结果图