Vue的 v-if 与 v-show 指令
Posted eyes++
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue的 v-if 与 v-show 指令相关的知识，希望对你有一定的参考价值。
相关说明全在代码注释里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--
v-if
isShow为true则v-if内显示，为false则不显示
-->
<div id="app1">
<div v-if="isShow">
<p>hello!</p>
{{msg}}
<p>hello!</p>
</div>
</div>
<script>
const app1 = new Vue({
el: '#app1',
data: {
msg: 'hello Vue.js!',
isShow: true
}
})
</script><hr>
<!--
v-if 与 v-else
"安卓"显示则"鸿蒙"不显示，"鸿蒙"显示则"安卓"不显示，
-->
<div id="app2">
<div v-if="isWin">
<p>济钢</p>
</div>
<div v-else>
<p>虚哥</p>
</div>
</div>
<script>
const app2 = new Vue({
el: '#app2',
data: {
isWin: true
}
})
</script>
<!--
v-if、v-if-else、v-else
-->
<div id="app3">
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80">良好</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>
</div>
<script>
const app3 = new Vue({
el: '#app3',
data: {
score: 95
}
});
</script><hr>
<!-- 用户登录方式切换案例 -->
<div id="app4">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="password" id="username" placeholder="用户密码">
</span>
<span v-else>
<label for="email">邮箱登录</label>
<input type="email" id="email" placeholder="用户邮箱">
</span>
<button @click='changeUser'>切换类型</button>
</div>
<script>
const app4 = new Vue({
el: '#app4',
data: {
isUser: true
},
methods: {
changeUser: function() {
this.isUser = !this.isUser;
}
}
})
</script><hr>
<!--
v-show 的使用以及与 v-if 的区别
v-show 与 v-if 的使用效果相同，但打开控制台可见区别
v-if 如果为 false，则页面无此元素
v-show 如果为 false,则页面有此元素，但添加了内联样式 style="display: none;"
因此实际开发中，切换频率很高的话一般使用 v-show ，如果一般只切换一次，则使用 v-if
-->
<div id="app5">
<p v-if='isIf'>{{msg_if}}</p>
<p v-show='isShow'>{{msg_show}}</p>
</div>
<script>
const app5 = new Vue({
el: '#app5',
data: {
msg_if: '我是if',
msg_show: '我是show',
isIf: true,
isShow: true
}
})
</script>
</body>
</html>
以上是关于Vue的 v-if 与 v-show 指令的主要内容，如果未能解决你的问题，请参考以下文章