v-if 與v-show使用 · vue

# v-if 的作用是通過一個布爾值表達式進行對dom的上樹和下樹的渲染基本使用“ ``` <p v-if="true" >我是第一行DOM元素</p> <p v-if="false">我是第二行DOM元素</p>  ``` 我們工作中不是使用布爾值進行渲染，而是通過帶有布爾值的表達式進行判斷。 ~~~ <div id="app"> <p v-if="!boo" >我是第一行DOM元素</p>  <p v-if="boo">我是第二行DOM元素</p> </div> <script src="vue/vue.js"></script> <script> var vue= new Vue({ el:'#app', data:{ boo: true } }) </script> ~~~ ![](https://img.kancloud.cn/90/af/90af5ad4c90299be934abdf003f0d8fa_1018x696.png) ``` <div id="app"> <p v-if="boo==100">我是第二行DOM元素</p> <button @click="add">點我加1</button> </div> <script src="vue/vue.js"></script> <script> var vue= new Vue({ el:'#app', data:{ boo: 95 }, methods:{ add(){ this.boo++ } } }) </script> ``` # v-if v-else使用 v-if不允許任何間隔不允許拆分 v-if 中間不允許有間隔 v-else ``` <body> <div id="app"> <p v-if="boo==100">我是第二行DOM元素</p> <p v-else-if='boo >=0 && boo <=5'>我是5</p> <p v-else-if='boo >=6 && boo <=10'>我是10</p> <p v-else-if='boo >=11 && boo <=15'>我是15</p> <p v-else-if='boo >=16 && boo <=20'>我是20</p> <p v-else='boo >20'>我是大于20</p> <button @click="add">點我加1</button> </div> <script src="vue/vue.js"></script> <script> var vue= new Vue({ el:'#app', data:{ boo: 95 }, methods:{ add(){ this.boo++ } } }) </script> </body> ``` ![](https://img.kancloud.cn/a3/32/a3324ebfb2c772d39c8a93e67462dfa6_1339x646.png) <br/><br/> # v-show使用 ## v-show 是通過控制display 屬性來控制顯示和隱藏的 ## v-show和v-if的使用場景區分是，如果頁面切換的特別頻繁，使用v-show 如果頁面的涉及范圍特別大并且不是特別頻繁切換使用v-if ~~~ <body> <div id="app"> <p v-show=' boo <=5'>我是5</p> </div> <script src="vue/vue.js"></script> <script> var vue= new Vue({ el:'#app', data:{ boo: 5 } }) </script> </body> ~~~ ![](https://img.kancloud.cn/33/ad/33ad1f4f9546c55ede6ac06069a28860_1251x737.png)