VUE学习笔记6__vue指令v-show和v-if
<!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 type="text/css">
.box{
margin: 10px 0;
border: 2px solid black;
width: 250px;
height: 100px;
border-radius: 10px;
box-shadow: 2px 2px 2px #ccc;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div id="app">
<div v-show="flag" class="box">v-show控制的box</div>
<div v-if="flag" class="box">v-if控制的box</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
</body>
</html>
预览
通过vue调试插件设置flag为false，此时
v-show控制的div结构还在
v-if控制的div已经被删除
频繁切换显示隐藏的用v-show
其他情况用v-if
原文地址：https://blog.csdn.net/houmenghu/article/details/145193847
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！