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

最新推荐文章于 2024-08-02 11:00:31 发布

敦厚的曹操

最新推荐文章于 2024-08-02 11:00:31 发布

阅读量3.3k

点赞数

分类专栏： 26.【Vue】文章标签： vue

本文链接：https://blog.csdn.net/dxnn520/article/details/124374609

版权

26.【Vue】专栏收录该内容

109 篇文章 7 订阅

订阅专栏

这个博客展示了如何使用Vue.js来创建一个卡片切换效果，当点击按钮时，相应卡片变为红色并显示，同时其他卡片隐藏。代码包括HTML结构、CSS样式以及Vue.js的JavaScript部分，用于处理卡片的显示和颜色变化。通过Vue.set方法更新数据绑定，实现了响应式更新。

摘要由CSDN通过智能技术生成

完整代码

注意：加载<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>