选项卡实现（使用v-bind和v-on指令）_v-bind,绑定其他,按要求完成。 3)绑定一个方法鼠标停在图片上悬停-CSDN博客

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

本文介绍如何使用Vue.js框架，通过JavaScript和CSS的条件渲染，实现一个简单的按钮控制内容块显示与隐藏的功能。通过`v-bind:class`和`v-on:click`指令，根据用户点击的按钮改变`num`变量，从而切换对应的内容区域。

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

<!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>