VUE v-if与v-show

v-if

本质:vue-if是动态的向DOM树内添加或者删除DOM元素

优点:更加灵活

 <li v-for="(item, index) in scene" v-if="item.share" @click="openScene(item, item.pid)">
     <span>{{ item.share }}</span>
 </li>
 <li v-else>
      <span>{{ item.share }}</span>
 </li>

缺点:每次都会重新删除或创建元素,具有较高的切换性能消耗

v-show

本质:vue-show本质就是标签display设置为none,控制隐藏

优点:v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。

缺点:每次切换元素的 display:none 样式,具有较高的初始渲染消耗

posted @ 2020-02-01 10:59  容忍君  阅读(381)  评论(0)    收藏  举报