vue实现tab切换外加样式切换

最新推荐文章于 2024-09-12 11:28:00 发布

J_Q_K_A

最新推荐文章于 2024-09-12 11:28:00 发布

阅读量3.6k

点赞数 2

分类专栏： vue 文章标签： vue tab 切换

本文链接：https://blog.csdn.net/J_Q_K_A/article/details/74007717

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none
        }

        #app {
            width: 504px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }

        ul {
            overflow: hidden;
        }

        li {
            width: 100px;
            height: 50px;
            float: left;
            text-align: center;
            line-height: 50px;
            border-bottom: 1px solid #000;
            border-right: 1px solid #000;
        }

        li:nth-child(5) {
            border-right: none;
        }

        .cur {
            height: 51px;
            background: blue;
            border-bottom: none;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(num,index) in nums" :class="{cur:iscur==index}" @click="iscur = index,tab('text'+(index+1))">
            {{num.t}}
        </li>
    </ul>
    <div class="box">
        <component :is='currentView' keep-alive></component>
    </div>
</div>
<script src="vue.js"></script>
<script>
    const text1 = Vue.component('text1', {template: `<div><h1>Text111111111111</h1></div>`});
    const text2 = Vue.component('text2', {template: `<div><h1>Text222222222222</h1></div>`});
    const text3 = Vue.component('text3', {template: `<div><h1>Text333333333333</h1></div>`});
    const text4 = Vue.component('text4', {template: `<div><h1>Text444444444444</h1></div>`});
    const text5 = Vue.component('text5', {template: `<div><h1>Text555555555555</h1></div>`});

    var vm = new Vue({
        el: "#app",
        data: {
            currentView: text1,
            nums: [{t: "text1"}, {t: "text2"}, {t: "text3"}, {t: "text4"}, {t: "text5"}],
            iscur: 0
        },

        methods: {
            tab(tabText){
                this.currentView = tabText;
            }
        }
    })
</script>
</body>
</html>