vue实现table切换

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

--------------------------------------------------html-----------------------------------

<div id="app">
            <!--频换切换建议用v-show,性能比v-if好-->
            <h3 v-show="tab == 1">首页</h3>
            <h3 v-show="tab ==2 ">新闻页</h3>
            <h3 v-show="tab == 3">个人中心</h3>
            
            <button @click="tableChange" data-id = '1'>首页</button>
            <button @click="tableChange" data-id = '2'>新闻页</button>
            <button @click="tableChange" data-id = '3'>个人中心</button>
        </div>

-------------------------------------------js-------------------------------

<script type="text/javascript">
            let app = new Vue({
                el:"#app",
                data:{
                    tab:1
                },
                methods:{
                    tableChange:function(e){
                        this.tab = e.target.dataset.id
                    }
                }
            })
        </script>

 

上一篇:vvvvvvue


下一篇:一文看懂Concurrent面试常问类Executor,ExecutorService,AbstractExecutorService,ThreadPoolExecutor作用,关系与区别