(2).v-show指令
功能: 控制一个元素的显示隐藏
如何: <元素 v-show=“返回bool类型的js表达式”>
原理:
- new vue()扫描到v-show时,就会先自动计算=后的js表达式的值,得到一个bool值。
- 如果执行结果为true则,当前元素什么都不干,默认显示!
- 如果执行结果为false则,当前元素自动添加display:none,隐藏。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.alert {
width: 300px;
height: 100px;
border: 1px solid #555;
position: fixed;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -50px;
}
.alert > p {
text-align: right;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="login">登录</button>
<div class="alert" v-show="show">
<p><a href="javascript:;" @click="close">×</a></p>
用户名:<input /><br />
密码:<input type="password" /><br />
<button>登录</button>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
show: false, //希望div.alert开始时默认隐藏
},
methods: {
login() {
this.show = true;
},
close() {
this.show = false;
},
},
});
</script>
</body>
</html>
效果1 | 效果2 | 效果3 |
---|---|---|
东哥笔记