一、v-if与v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h1 v-if="true">{{msg1}}</h1>
<h1 v-show="false">{{msg1}}</h1>
<h1 v-show="isshow">{{msg1}}</h1>
<h1 v-if="isshow">{{msg1}}</h1>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "悬悬小",
msg1:"是傻子",
isshow:true,
},
methods: {
}
});
</script>
- 相同点：v-if与v-show都可以动态控制dom元素显示隐藏
- 不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display，dom元素还在。
- v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
- v-if适合运营条件不大可能改变；v-show适合频繁切换。
二、案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h2 v-show="isShow">{{msg}}</h2>
<button @click="changeisShow(false)">点击隐藏h2标签</button>
<button @click="changeisShow(true)">点击显示h2标签</button>
<button @click="changeisShow1()">点击一下隐藏再点击一下显示</button>
<button @click="isShow=!isShow">点击一下隐藏再点击一下显示2</button>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: "悬悬小",
isShow:true,
},
methods: {
changeisShow:function (str) {
this.isShow=str;
},
changeisShow1:function () {
this.isShow=!this.isShow;
}
}
});
</script>
总结
注意代码中注解的部分，重点掌握v-if和v-show的区别。
|