Vue选项卡制作(tab切换)

最新推荐文章于 2025-03-23 22:50:10 发布

原创最新推荐文章于 2025-03-23 22:50:10 发布 · 817 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue选项卡制作 #实现tab切换

vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍使用Vue.js实现选项卡组件的过程，包括HTML结构、样式设置及Vue.js的交互逻辑。通过具体代码示例，展示如何响应用户点击事件切换不同选项卡的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要的实现功能如下:(点击进行切换,这里我不做太多的样式处理了,主要看功能)

2.话不多说:主要看代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡制作</title>
    <!--js文件记得用自己的-->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
    <div id="xuanxiang" style="text-align: center;margin: 0 auto;width: 500px;">
        <div>
            <ul style="list-style-type: none" >
                <li style="float: left;
                           width: 130px;
                           display: block;
                           margin-top: 40px;
                           margin-right: 10px;
                           margin-bottom: 0px;
                           background-color: aquamarine;
                           line-height: 30px;
                           border-radius: 15px 15px 0 0;
                           color: blueviolet;
                           :hover{background-color: blueviolet;
                                    color: aliceblue;}"

                    v-for="(item,index) in arr" @click="changes(index)">{{ item.xuan }}</li>
            </ul>
        </div>
        <div style="text-align: center;margin: 0 auto;float: left;margin-top: 80px;background-color: antiquewhite;width: 500px;text-align: center;height: 100px;
                        margin-top: 0px;
                        vertical-align: middle;display: table-cell;">
            <p>{{ valuessss }}</p>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    var vm=new Vue({
        el:"#xuanxiang",
        data:{
            arr:[
                {xuan:'change1',valu:'哈哈哈哈'},
                {xuan:'change2',valu:'嘿嘿嘿'},
                {xuan:'change3',valu:'呵呵呵呵'},
            ],
            valuessss:''
        },
        methods:{
            changes:function (index) {
                this.valuessss='';
                this.valuessss=this.arr[index].valu;
            }
        }

    })
</script>