Vue2常用指令2 v-if、v-show
阿新 • • 發佈：2018-12-14
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <p v-if="show">要顯示出來</p> <p v-if="hide">不要顯示</p> <p v-if='height>1.55'>小明的身高是{{height}}m</p> <p v-if='height1>1.55'>小王的身高是{{height1}}m</p> </div> <script type="text/javascript" src="../assets/js/vue.js"></script> <script> new Vue({ el:'#app', data () { return { show:true, hide:false, height:'1.68', height1:'1.50', } } }) </script> </body> </html>
v-if的效果圖
v-show的效果圖
v-if和v-show顯示出來的效果是一樣的，但二者也是有區別的
v-if是真實的條件渲染，因為它會確保條件塊在切換當中適當地銷燬與重建條件塊內的事件監聽器和子元件，v-show則只是簡單地基於CSS切換。
v-if有更高的切換消耗，而v-show有更高的初始渲染消耗。因此，如果需要頻繁切換使用v-show較好，如果在執行時條件不大可能改變則使用v-if較好。
v-else必須和v-if或者v-else-if配合使用，不能單獨使用
執行效果圖
