前言
v-if
v-else
v-else-if
v-show
一、v-if
1.简介
- 写法：（表达式返回的是布尔值）
（1）v-if=“表达式”
（2）v-else=“表达式”（一般不带表达式，v-else是当v-if或v-else-if都不成立就会触发）
（3）v-else-if=“表达式” - 适用于切换频率低的场景
- 特点：不展示的DOM元素直接移除
- 注意：v-if可以和v-else、v-else-if一起使用，但要求结构不能被“打断”
2.实例
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>当前n值：{{n}}</h2><br> <button @click="change">点我n+1</button><br> <h4 v-if="n===1">我是NO1</h4> <h4 v-else-if="n===2">我是NO2</h4> <h4 v-else="n===3">我是NO3</h4> </div> <script> var vm = new Vue({ el: "#root", data: { n: 0 }, methods: { change() { this.n++ } } }) </script> </body> </html>
页面才加载时n=0，但是这是”我是NO3“显示在页面上，这就说明v-else后的表达式没有作用
点击一下按钮，结果如下：
这里大家注意一下，如果我三个<h2>标签都用的v-if，它会依次判断，但是我用了v-else或v-else-if，当第一个满足后，后面的标签就不会判断了，效率比较高，但是这也就意味着v-else或v-else-if不能同时触发多个
解释代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>当前n值：{{n}}</h2><br> <button @click="change">点我n+1</button><br> <h4 v-if="n===1">我是NO1</h4> <h4 v-else-if="n===2">我是NO2</h4> <h4 v-else-if="n===2">我是NO2</h4> </div> <script> var vm = new Vue({ el: "#root", data: { n: 0 }, methods: { change() { this.n++ } } }) </script> </body> </html>
按逻辑n=2时，应该显示两个”我是NO2，但是实际只显示一个“
下面解释一下上面说的不嫩被”打断“的意思
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>当前n值：{{n}}</h2><br> <button @click="change">点我n+1</button><br> <h4 v-if="n===1">我是NO1</h4> <div>我打断你了</div> <h4 v-else-if="n===2">我是NO2</h4> <h4 v-else-if="n===3">我是NO3</h4> </div> <script> var vm = new Vue({ el: "#root", data: { n: 0 }, methods: { change() { this.n++ } } }) </script> </body> </html>
n=1时正常显示，但是n=2时就没有正常显示“我是NO2”，原因就是有个div标签”打断“了
3.v-if控制嵌套标签
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <div v-if="1===1"> <h1>你</h1> <h1>我</h1> <h1>他</h1> </div> </div> <script> var vm = new Vue({ el: "#root" }) </script> </body> </html>
这种标签嵌套标签的写法不是很规范，虽然可以执行，建议下面的写法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <template v-if="1===1"> <h1>你</h1> <h1>我</h1> <h1>他</h1> </template> </div> <script> var vm = new Vue({ el: "#root" }) </script> </body> </html>
二、v-show
1.简介
- 写法：v-show=“表达式”（表达式返回的是布尔值）
- 适用于切换频率比较高的场景
- 特点：不展示的DOM元素未被移除，仅仅是将渲染的标签的display的值变成了none
2.实例
代码如下（示例）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>当前n值：{{n}}</h2><br> <button @click="change">点我n+1</button><br> <h4 v-show="n===1">我是NO1</h4> <div>我打断你了</div> <h4 v-show="n===2">我是NO2</h4> <h4 v-show="n===3">我是NO3</h4> </div> <script> var vm = new Vue({ el: "#root", data: { n: 0 }, methods: { change() { this.n++ } } }) </script> </body> </html>
结合上面四个截图进行解释：第一幅截图是刚加载时的DOM，可以看出没有满足v-show表达式时display的值都是none，这就是浏览器页面没显示的原因；第二幅图和第三副图就是n变化后的页面显示，额可以发现v-show可以被打断；第四幅图中n=2，所以“我是NO2”的那个标签display不等于none，显示在页面上
总结
v-if是直接控制DOM是否渲染在页面，而v-show是控制display属性的值来控制是否显示在页面
