vue中提供了两个指令可以用于判断是否要显示元素，分别是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"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p v-if='is_login==true'>欢迎登陆</p> <p v-else><a href="">登录</a><a href="">注册</a></p> <!-- v-else不能单独使用,只能跟着v-if或者跟着v-else-if后面,表示或者的意思 v-else会使用上一个v-if作为条件判断,并且v-else和v-if必须紧密相连 --> <!-- 一次只会出现一个结果 v-else-if可以有多个,但是和v-else一样,必须紧跟这v-if后面,不能单独使用 --> <p v-if='num%3==0'>这个数可以被3整除</p> <p v-else-if='num%5==0'>这个数可以被5整除</p> <p v-else-if='num%7==0'>这个数可以被7 整除</p> <p v-else>这个数比较特别</p> <!-- v-show只能单独使用,后面无法跟v-else --> <p v-show="num>10">num大于10</p> <p v-show="num<=10">num小于等于10</p> </div> <script> let vm=new Vue({ el:'#app', data:{ is_login:false, num:5 }, }) </script> </body> </html>