小白初学习,如果不当,请多见谅!
v-if:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-条件渲染</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id = "app">
<h1>用户名:{{username}}</h1>
<h2 v-if = "isVip">用户类型: VIP</h2>
<!-- v-if与v-else中间不能有其他任何元素-->
<h3 v-else>用户类型:普通用户</h3>
<h2>允许用户登录的时间:</h2>
<h3 v-if="age >18">允许登录24小时</h3>
<h3 v-else-if = "age >14">允许登录8小时</h3>
<h3 v-else>允许登录4小时</h3>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data:{
username: "小秘",
isVip: false,
// isVip: true
age: 24
}
})
</script>
</body>
</html>
v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-v-show</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id = "app">
<div v-show = "isShow" id = "show">
hello vue!
</div>
<button @click = "show">切换显示内容</button>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data:{
isShow: true
},
methods:{
show : function () {
app.isShow = !app.isShow
}
}
})
</script>
</body>
</html>
页面内容不显示时:
页面内容显示时:
通过对比,可以发现:
v-if: 不显示时:第一次就不会渲染,如果内容已显示需要修改为不显示时,内容会从dom上去除 如果页面内容只是显示一次,建议使用v-if
v-show: 不显示时,就会改为display:none 但是会渲染在dom上 如果需要反复需要切换内容,建议使用v-show