if…else… 和常规语法一样，是做条件判断的，本例子，v-if 和 v-else 绑定了 isLogin，在 js 中控制 isLogin的值，true显示绑定 v-if 的标签中的文本，false 则显示绑定 v-else 的标签中的文本 。 v-show 也是控制显示输出的，用法一样的，这里没写例子，二者的区别的是，v-if 控制加载不加载，v-show控制 css 中 display 值，v-if 减轻服务器压力，v-show 更流畅。
<!DOCTYPE html> <html lang="en"> <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"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Document</title> </head> <body> <h1>v-if&v-else&v-show</h1> <hr> <div id="app"> <div v-if='isLogin'>你好，李小钦</div> <div v-else='isLogin'>再见，李小钦</div> </div> <br> <p>v-if控制加载不加载，show控制css中display值,if减轻服务器压力，show更流畅</p> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ isLogin:false } }) </script> </body> </html>