1、v-show作用上和v-if是相同的

  1. <html>
  2.   <head>
  3.   </head>
  5.   <body>
  6.     <div id="app">
  7.       <div v-if="tmp">看到我了!</div>
  8.       <div v-show="tmp">看到我了!</div>
  10.       </br>
  11.     </br>
  12.   <button type="button" @click="tmp=!tmp"> 点我1 </button>
  13.   </div>
  14. </body>
  16. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  17. <script>
  18.   new Vue({
  19.     //指定作用于那一个div
  20.     el:'#app',
  21.     //属性
  22.     data:{
  23.       tmp:false,
  24.     }
  25.   });
  26. </script>
  28. </html>

2、v-if和v-show的区别

  1. v-if可以是多条件出现的，v-show单条件出现的。
  2. 效率不同：

v-if是根据条件进行判断是否要渲染，如果条件为false时按f12查看源代码时是不会出现的。
v-show则是不管你条件是什么都会渲染，如果条件为false则再把display设置为none进行隐藏。
所以，v-if有更高的切换开销，而v-show有更高的渲染开销。
因此，如果需要频繁地切换条件则用v-show会比较好，相反如果运行时条件很少改变，则用v-if会较好。