一:v-if 指令和 v-show 指令的使用和区别
案例
1
:
v-if
的使用
案例
2
:
v-show
的使用
简单的比较
v-if
指令和
v-show
指令,效果是一模一样的
点击浏览器(
F12
)中的查看器观察显示页面元素信息
如果
flag
为
true
,观察到的结果是一致的。
![](https://i-blog.csdnimg.cn/blog_migrate/dba6d805b23be3e8346e0488e1ffb13b.png)
如果 flag 为 false,观察到的结果是不同的
其中
v-if
中的元素是本身就没有的,
v-show
中的元素是存在的,只是
通过
false
属性值,系统为该元素新增了
display:none
,表示不展现该
元素 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入vuejs框架 -->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--
v-if:boolean true/flase
当值为true:则展现标签对中的信息
当值为false:则不展现标签对中的信息
-->
<p v-if="flag">
显示该文本1
</p>
<p v-show="flag">
显示该文本2
</p>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
flag : false
},
//methods:表示vuejs中对于绑定事件函数的定义,可以同时定义多个函数,多个函数之间使用逗号来进行分隔
methods:{
}
});
</script>
</body>
</html>
通过观察得到
结论
:
v-if
为
true
:创建条件元素 为
false
:去除该元素
v-show
为
true
:展现条件元素 为
false
:隐藏该元素
在实际项目开发中,一般的需求情况下,我们使用
v-if
就可以了。
但是如果对于元素的展现与否需要频繁的切换,我们需要使用 v-show
的形式展现或者隐藏元素,因为 v-if 在每次切换为 true 的时候都需要
重新的创建元素,降低页面展现元素的效率
。