选项卡实现（使用v-bind和v-on指令）

weixin_45703831

已于 2024-05-26 19:12:46 修改

阅读量819

点赞数 9

分类专栏：案例实现文章标签： vue.js

于 2024-04-02 18:00:15 首次发布

本文链接：https://blog.csdn.net/weixin_45703831/article/details/137279756

版权

案例实现专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<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></title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<style>
    .box {
        width: 500px;
        height: 300px;
    }

    .option button {
        border: none;
        width: 100px;
        height: 50px;
        background-color: antiquewhite;
    }

    .option .active {
        background-color: blueviolet;
    }

    .content div {
        height: 300px;
        background-color: aqua;
        /* 这句代码意思是将div里面的所有内容隐藏起来 */
        display: none;
    }

    .content .con {
        /* 这句代码意思是将内容显示出来 */
        display: block;
    }
</style>
<!-- 
    思路：
        1、首先将所有内容隐藏起来：display: none;
        2、当点击到对应的按钮的时候，修改变量值，通过判断与绑定的值是否一致来将内容显示出来：display: block;
-->

<body>
    <div id='app'>
        <div class="box">
            <!-- 上面的盒子 -->
            <div class="option">
                <!-- : -> 这v-bind的简写方式 -->
                <button v-bind:class="{active:num==1}" v-on:click="num=1">按钮一</button>
                <button :class="{active:num==2}" @click="num=2">按钮二</button>
                <button :class="{active:num==3}" @click="num=3">按钮三</button>
            </div>

            <!-- 下面的盒子 -->
            <div class="content">
                <div :class="{con:num==1}">这是内容一</div>
                <div :class="{con:num==2}">这是内容二</div>
                <div :class="{con:num==3}">这是内容三</div>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 1
        }
    })
</script>

</html>