<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id ="vue">
<!--
区别:
v-if :当条件为false,包含 v-if 指令的元素,根本就不会存在dom中
v-show : 当条件为fasle时,v-show 只是给我们的元素添加一个行内样式:dispaly:none
-->
<h2 v-if="isShow">{{message}}</h2>
<h2 v-show="isShow">{{message}}</h2>
<!--
开发中如何选择:
根据:显示与隐藏之间频繁度
-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#vue',
data:{
message:'你好!华为',
isShow:true
}
});
</script>
</body>
</html>
13.v-show 与 v-if 的区别
最新推荐文章于 2023-11-20 17:51:07 发布