版权声明：正在学习中，有错误欢迎指出。感谢比❤❤~ https://blog.csdn.net/gx17864373822/article/details/82225422
v-if v-else v-show 指令
1、index.html中新增加链接
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vue.js实例</title>
</head>
<body>
<h1>VUE2.0实例</h1>
<hr>
<ol>
<li><a href="./example/helloworld.html">Hello World实例！</a></li>
<li><a href="./example/v-if.html">v-if&v-else&v-show</a></li>
</ol>
</body>
</html>
2、v-if.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>v-if & v-show & v-else</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-if 判断是否加载</h1>
<hr>
<div id="app">
<div v-if="isLogin">你好：猪猪!</div>
<div v-else>
请登录后操作
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data: {
isLogin:true
}
})
</script>
</body>
</html>
v-if和v-else是一起用的
v-show表面上看是和v-if作用相同，但是有很大区别：
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。如果不显示，display：none