vue.js v-if 控制true/false

时间:2018-11-10 12:43:21   收藏:0   阅读:5284

通过v-if 控制true/false  可以使两个DIV隐藏显示切换

Html部分

技术分享图片
    <div id="index-content">
        <div>
            <a @click="showNewGoodsTab">点击板块一显示板块二隐藏</a>
            <a @click="showOftenRouteTab">点击板块二显示板块一隐藏</a>
        </div>
    </div>
        <!-- 包含两个板块的DIV -->
    <div class="mui-content">
        <!-- 板块一 -->
            <div v-if="new_goods_show">板块一</div>
        <!-- 板块二 -->
            <div v-if="often_route_show">板块二</div>
    </div>
View Code

Js部分

技术分享图片
                var pub_index_content = new Vue({
                    el:"#index-content",
                    data:{
                        new_goods_show:true,
                        often_route_show:false
                    },
                    methods: {
                        showNewGoodsTab: function() {
                            this.new_goods_show = true;
                            this.often_route_show = false;
                        },
                        showOftenRouteTab: function() {
                            this.new_goods_show = false;
                            this.often_route_show = true;
                        }
                    }
                })
View Code

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!