【Vue】超实用的通过Vue实现选项卡切换(图文+完整代码)-CFANZ编程社区

【Vue】超实用的通过Vue实现选项卡切换(图文+完整代码)_vue.js
完整代码
注意：加载<script src="js/vue/vue.js"></script>中vue.js的位置
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择项卡切换代码</title>
    <script src="js/vue/vue.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #card_list {
        position: relative;
        background-color: black;
        height: 200px;  /*为防止塌陷，父div必须设置固定高度*/
        
    }


    .card_list_1 {
        height: 200px;
        width: 100%;
        background-color: rgb(255, 211, 211);
        text-align: center;
        line-height: 200px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .card_list_2 {
        height: 200px;
        width: 100%;
        background-color: rgb(152, 179, 253);
        text-align: center;
        line-height: 200px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .card_list_3 {
        height: 200px;
        width: 100%;
        background-color: rgb(157, 242, 171);
        text-align: center;
        line-height: 200px;
        position: absolute;
        top: 0;
        left: 0;
    }

</style>

<body>

    <div id="app">

        <div class="card_button">
            <button @click="card_click(0)" :style="{color:m_color[0]}">卡片1</button>
            <button @click="card_click(1)" :style="{color:m_color[1]}">卡片2</button>
            <button @click="card_click(2)" :style="{color:m_color[2]}">卡片3</button>
        </div>

        <div id="card_list">
                <div v-show="card_list[0]==1" class="card_list_1">
                    卡片1
                </div>

                <div v-show="card_list[1]==1" class="card_list_2">
                    卡片2
                </div>
                <div v-show="card_list[2]==1" class="card_list_3">
                    卡片3
                </div>
        </div>
        <div>1</div>
        <div>2</div>

    </div>


</body>

<!-- 选中效果 -->
<script>

    var app = new Vue({

        el: "#app",
        data: {
            m_color: ["red", "black", "blacks"],
            card_list: ["1", "1", "1"],

        },
        methods: {

            card_click(a) {

                // 点击效果

                Vue.set(this.m_color, 0, "black");
                Vue.set(this.m_color, 1, "black");
                Vue.set(this.m_color, 2, "black");

                Vue.set(this.m_color, a, "red");

                // 卡片切换
                Vue.set(this.card_list, 0, "0");
                Vue.set(this.card_list, 1, "0");
                Vue.set(this.card_list, 2, "0");
                Vue.set(this.card_list, a, "1");

            }

        },
    })
</script>