v-if的使用
v-if是vue的一个内部指令用来判断是否加载html的DOM比如模拟用户登录状态,在用户登录后实现用户名称,判断的内部指令
v-else否则,等同于js中的if/else
v-show的使用:
调整css中display属性,DOM已经加载,只是CSS控制没有显示出来。
v-if 和v-show的区别:
v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。
v-show:调整css dispaly属性,可以使客户端操作更加流畅。
<!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>HelloWorld</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-if&v-else&v-show</h1>
<hr>
<div id="app">
<div v-if="isLogin">你好,欢迎登陆</div>
<div v-else>请登录</div>
<!-- <div v-show="isLogin">你好,欢迎登陆</div> -->
<!-- v-if 判断是否加载,可以减轻服务器的压力,在需要时加载。 -->
<!-- v-show 调整css dispaly属性,可以使客户端操作更加流畅。 -->
</div>
<script typt="text/javascript">
var app = new Vue({
el:"#app",
data:{
isLogin:true,
}
})
</script>
</body>
</html>