Vue实现简单选项卡效果

2024-04-02 19:04:59 914人浏览八月长安

摘要

本文实例为大家分享了Vue实现简单选项卡效果的具体代码，供大家参考，具体内容如下效果图 1.头部选项卡点击切换下标ID 传递一个参数回去，active绑定选中样式 <di

本文实例为大家分享了Vue实现简单选项卡效果的具体代码，供大家参考，具体内容如下

效果图

1.头部选项卡

点击切换下标ID 传递一个参数回去，active绑定选中样式

<div id="app">
        <ul>
            <li v-for='(item,index) in list' @click='check(index)' :class="{ active: index === TabId }">
                <h1> {{item.title}}</h1>
            </li>
        </ul>
</div>

2.完整HTML

默认使用V-show来切换，获取盒子下标，没有dom操作

当然，Vue官方文档也不推荐V-if和V-for同时使用

<div id="app">
        <ul>
            <li v-for='(item,index) in list' @click='check(index)' :class="{ active: index === TabId }">
                <h1> {{item.title}}</h1>
            </li>
        </ul>
        <div class="mycontent" v-for='(item,index) in list' v-show="index === TabId">
            <h1>{{item.content}}</h1>
        </div>
</div>

3.Vue

下标默认为0

<script>
        //清除默认提示样式
        Vue.config.devtools = false
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    //下标ID 默认从零开始
                    TabId: 0,
                    list: [
                        {
                            title: 'Itachi',
                            content: 'VUE'
                        },
                        {
                            title: 'Sasuke',
                            content: 'html'
                        },
                        {
                            title: 'Obito',
                            content: 'CSS'
                        },
                        {
                            title: 'Madara',
                            content: 'javascript'
                        },
                    ]
                }
            },
            methods: {
 
                //将点击事件获取的下标ID传递给要切换的盒子
                check(index) {
                    this.TabId = index;
                },
            }
        });
</script>

4.完整代码

<!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
 
    #app ul {
        width: 800px;
        background: black;
        opacity: .9;
        margin: 100px auto;
        display: flex;
        justify-content: space-between;
    }
 
    #app li {
        width: 300px;
        text-align: center;
        cursor: pointer;
        color: #fff;
    }
 
    #app li:hover {
        cursor: pointer;
    }
 
    #app li.active {
        background: #03a9f4;
 
    }
 
    .mycontent {
        width: 800px;
        height: 500px;
        margin: 0 auto;
        background: #03a9f4;
        opacity: .8;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
 
<body>
    <div id="app">
        <ul>
            <li v-for='(item,index) in list' @click='check(index)' :class="{ active: index === TabId }">
                <h1> {{item.title}}</h1>
            </li>
        </ul>
        <div class="mycontent" v-for='(item,index) in list' v-show="index === TabId">
            <h1>{{item.content}}</h1>
        </div>
    </div>
 
 
    <script>
        //清除默认提示样式
        Vue.config.devtools = false
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    //下标ID 默认从零开始
                    TabId: 0,
                    list: [
                        {
                            title: 'Itachi',
                            content: 'VUE'
                        },
                        {
                            title: 'Sasuke',
                            content: 'HTML'
                        },
                        {
                            title: 'Obito',
                            content: 'CSS'
                        },
                        {
                            title: 'Madara',
                            content: 'JavaScript'
                        },
                    ]
                }
            },
            methods: {
 
                //将点击事件获取的下标ID传递给要切换的盒子
                check(index) {
                    this.TabId = index;
                },
            }
        });
    </script>
</body>
 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue实现简单选项卡效果

本文链接: https://www.lsjlt.com/news/141050.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341