1. 程式人生 > >vue.js v-if 控制true/false

vue.js v-if 控制true/false

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