vue.js小项目——选项卡

最新推荐文章于 2023-03-19 15:59:54 发布

longfei815

最新推荐文章于 2023-03-19 15:59:54 发布

阅读量109

点赞数

分类专栏：小项目文章标签： vue.js css html5

本文链接：https://blog.csdn.net/jolinoy/article/details/125247060

版权

小项目专栏收录该内容

9 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <style>
            #app #box{
                width: 300px;
                height: 300px;
                background-color: skyblue;
                text-align: center;
            }
            #app div{
                outline: none;
            }
            #app div input{
                outline: none;
                border: 0px;
                margin: 0px;
            }
            #app div .active{
                background-color: skyblue;
            }
            #app #box div{
                display: none;
                line-height: 300px;
                
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div>
                <input type="button" name="" value="按钮1" :class="num===1?'active':''" @click="num=1">
                <input type="button" name="" value="按钮2" :class="num===2?'active':''" @click="num=2">
                <input type="button" name="" value="按钮3" :class="num===3?'active':''" @click="num=3">
            </div>
            <div id="box">
                <div :style="{display:num===1?'block':''}">按钮1对应的数据</div>
                <div :style="{display:num===2?'block':''}">按钮2对应的数据</div>
                <div :style="{display:num===3?'block':''}">按钮3对应的数据</div>
            </div>
        </div>
        <script>
            new Vue({
                el:'#app',
                data:{
                    num:1  //默认按钮1显示。
                }
            })
        </script>
    </body>
</html>

执行结果：