VUE學習之------v-show v-if
阿新 • • 發佈:2018-11-19
v-show只是在修改元素的css樣式,也就是display的屬性值,元素始終在Dom樹上,有更高的初始渲染消耗,適合做頻繁的額切換;
v-if是根據後面資料的真假值判斷直接從Dom樹上刪除或重建元素節點,有更高的切換消耗,不適合做頻繁的切換;
<style>
.isShowStyle{
display: block;
}
.isIfStyle{
display: block;
}
.isIfBtnStyle{
display: block;
}
</style>
<div id="simple"> <button @click="handleVShow">v-show</button> <span v-show="isShow" class="isShowStyle">show by v-show</span> <button @click="handleVIf" class="isIfBtnStyle">v-if</button> <span v-if="isIf" class="isIfStyle">show by v-if</span> </div>
var vm = new Vue({ el:"#simple", data:{ isShow: false, isIf : false }, methods:{ handleVShow : function () { this.isShow = !this.isShow; }, handleVIf : function () { this.isIf = !this.isIf; } } });
從DevTool中可以清楚的看到:v-show只是在修改元素的css樣式,也就是display的屬性值,元素始終在Dom樹上
v-if是根據後面資料的真假值判斷直接從Dom樹上刪除或重建元素節點