v-show, v-if, 以及动态组件的区别

vue提供了v-if, v-show来动态显示隐藏组件

同时也提供了<component>元素在一个挂载点上动态的切换组件, 通过 is 来决定哪个组件被渲染显示

配合<keep-alive>使用时, 可以保留组件状态避免重新渲染

　　[ 和v-show 比较的差别是 v-show 是一开始就渲染的所有组件 , 之后只是样式的显示与隐藏 ]

     <button

         v-for="tab in tabs"

         :class="{active:currentTab==tab}"

         @click="currentTab=tab"

     >{{tab}}</button>

     <tab-posts v-show="currentTab=='Posts'"></tab-posts>

     <tab-archive v-show="currentTab=='Archive'"></tab-archive>

　　[ 和v-if 比较的差别是 v-if 切换一次就需要重新渲染一次组件 ]

<tab-posts v-if="currentTab=='Posts'"></tab-posts>

<tab-archive v-if="currentTab=='Archive'"></tab-archive>

　　[ 动态组件, 和v-if有些类似, 但是又不同, 显示的时候, html上就有这个标签, 隐藏的时候, 就不显示在html上, 但是不会再次渲染组件 ]

     <keep-alive>

         <component :is="currentTabComponent"></component>

     </keep-alive>

 computed:{

      currentTabComponent:function(){

          return 'tab-'+this.currentTab.toLowerCase();

      }

  },

巴特西

v-show, v-if, 以及动态组件的区别

最新文章

热门文章