作用：过条件判断展示或者隐藏某个元素。或者多个元素。通常搭配 v -else或 v-else-if来使用。 使用场景举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <div v-if="score>=90">优秀</div> // 这里需要注意，80<score<90在这里不支持。 <div v-else-if="score<90&&score>=80">良好</div> <div v-else-if="score890&&score>=60">及格</div> <div v-else>不及格</div> </div> <script> var vue = new Vue({ el: "#app", data: { score:10 }, methods: { handle: function () { } } }); </script> </body> </html>可以看到：根据满足的条件，只渲染了一个div。
作用：根据表达式之真假值，切换元素的 display。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <div v-show="flag">测试v-show</div> <button v-on:click="handle">切换</button> </div> <script> var vue = new Vue({ el: "#app", data: { flag:true }, methods: { handle: function () { this.flag = !this.flag } } }); </script> </body> </html>在v-show="flag中，falg=true我们可以看到： 在v-show="flag中，falg=false我们可以看到：
如果我们需要频繁的让一个元素显示或者隐藏，这个时候我们推荐使用v-show，如果一个元素我们渲染出来改动比较小的话，推荐使用v-if。因为v-if是动态的向DOM树内添加或者删除DOM元素，性能开销比较大。
