06.选项卡案例

一、选项卡案例

```html

    <div class="tab_con" id="app">

        <div class="tab_btns">

            <input type="button" value="按钮一" :class="num==1? 'active':''" @mouseover="num=1">

            <input type="button" value="按钮二" :class="num==2? 'active':''" @mouseover="num=2">

            <input type="button" value="按钮三" :class="num==3? 'active':''" @mouseover="num=3">

        </div>

        <div class="tab_cons">

            <div :class="num==1? 'current':''">按钮一对应的内容</div>

            <div :class="num==2? 'current':''">按钮二对应的内容</div>

            <div :class="num==3? 'current':''">按钮三对应的内容</div>

        </div>

    </div>

    <script>

        var vm = new Vue({

            el:"#app",

            data:{

                num:1

            }

        })

    </script>

```