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)