选项卡的实现

1 @是指令,相当于v-on:
2 :是绑定,相当于v-bind
3 正常使用class: class=“box divbox”
4 三元表达式: 条件 ? true : false

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        .tab_con{
            width:500px;
            height:350px;
            margin:50px auto 0;
        }
        .tab_btns{
            height:50px;
        }
        .tab_btns input{
            width:100px;
            height:50px;
            background:#ddd;
            border:0px;
            outline:none;
        }

        .tab_btns .active{
            background:gold;
        }

        .tab_cons{
            height:300px;
            background:gold;
        }

        .tab_cons div{
            height:300px;
            line-height:300px;
            text-align:center;
            display:none;
            font-size:30px;
        }

        .tab_cons .current{
            display:block;
        }
    </style>
    <script src="./vue.js"></script>
    <script>
        window.onload = function () {
             var vm = new Vue({
            el:'#app',
            data:{
                num:0
            }
        })

        }

    </script>
</head>

<body>
<div id = 'app'>
    <div class = 'tab_con'>
       <div class = 'tab_btns'>
           <input @click="num=0" type="button" value="按钮一" :class="num==0?' active':''">
           <input @click="num=1" type="button" value="按钮二" :class="num==1?' active':''">
           <input @click="num=2" type="button" value="按钮三" :class="num==2?' active':''">
       </div>
        <div class="tab_cons">
            <div :class="num==0?'current':''">按钮一对应的按钮</div>
            <div :class="num==1?'current':''">按钮二对应的按钮</div>
            <div :class="num==2?'current':''">按钮三对应的按钮</div>
        </div>
    </div>
</div>

</body>
</html>

效果图:
在这里插入图片描述

代序春秋

原创文章 86 获赞 114 访问量 17万+

关注私信

猜你喜欢