(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 |
|---|---|---|
 |
 |
 |
東哥筆記