vue.js v-if 控制true/false

Posted 2021-01-18 cp123

通过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