vue.js v-if 控制true/false
阿新 • • 發佈:2018-11-10
通過v-if 控制true/false 可以使兩個DIV隱藏顯示切換
Html部分
<div id="index-content"> <div> <a @click="showNewGoodsTab">點擊板塊一顯示板塊二隱藏</a> <a @click="showOftenRouteTab">點擊板塊二顯示板塊一隱藏</a> </div> </div> <!--View Code包含兩個板塊的DIV --> <div class="mui-content"> <!-- 板塊一 --> <div v-if="new_goods_show">板塊一</div> <!-- 板塊二 --> <div v-if="often_route_show">板塊二</div> </div>
Js部分
varView Codepub_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; } } })