PS:在Vue中,我们可以使用v-if
和v-show
来控制元素或模板的渲染。而v-if
和v-show
也属于Vue的内部常用的指令。这里所说的指令就是directive
,指特殊的带有前缀v-
的命令,指令的值限定为绑定表达式,指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。
咱们先来看v-if
指令。其作用就是根据表达式的值true
或false
在DOM中生成或者移除一个元素(或多个元素)。有点类似JavaScript中的if
条件判断。在Vue中除了v-if
也有v-else-if
和v-else
之类。
轉載自大漠《Vue 2.0学习笔记:v-if 和 v-show》一文: https://www.w3cplus.com/vue/v-if-vs-v-show.html © w3cplus.com
* v-if
1-1:v-if="true"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if和v-show</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="true">我出現了</p>
</div>
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
結果為:
我出現了
1-2:v-if="XX"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show">能看到我嗎?</p>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
</body>
</html>
結果為:
能看到我嗎?
1-3:template v-if = "true"
我们切换多个元素一般不这么使用,而是配合<template>
元素当做包装元素,并在上面使用v-if
。最终的渲染结果不会包含<template>
元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if和v-show</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<template v-if = "true">
<p>我在這裡1</p>
<p>我在這裡2</p>
<p>我在這裡3</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
結果為:
我在這裡1
我在這裡2
我在這裡3
1-4: template v-if = "XX"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if和v-show</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<template v-if = "show">
<p>我在這裡1</p>
<p>我在這裡2</p>
<p>我在這裡3</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
show:true
}
})
</script>
</body>
</html>
結果為:
我在這裡1
我在這裡2
我在這裡3
2-1:v-else為false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show">能看到我嗎?1</p>
<p v-else="hide">能看到我嗎?2</p>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true,
hide:false
}
})
</script>
</body>
</html>
結果為:
能看到我嗎?1
2-2:v-else為true
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show1">能看到我嗎?1</p>
<p v-else="show2">能看到我嗎?2</p>
</div>
<script>
new Vue({
el: '#app',
data: {
show1: false,
show2: true
}
})
</script>
</body>
</html>
結果為:
能看到我嗎?2
3-1:v-else-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show == 1">能看到我嗎?1</p>
<p v-else-if="show==2">能看到我嗎?2</p>
<p v-else="show==3">能看到我嗎?3</p>
</div>
<script>
new Vue({
el: '#app',
data: {
show: 3
}
})
</script>
</body>
</html>
結果為:
能看到我嗎?3
4-1:v-show
v-show
和v-if
功能有点相似,其中v-if
依赖于控制DOM节点,而v-show
是依赖于控制DOM节点的display
属性。当v-show
传入的值为true
时,对应DOM元素的display
的值为block
之类的,反之为false
时,display
的值为none
。也就是用户看不到元素的显示,但其DOM元素还是存在的。原文: https://www.w3cplus.com/vue/v-if-vs-v-show.html © w3cplus.com
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-show="true">能看到我嗎?1</p>
<p v-show="hide">能看到我嗎?2</p>
</div>
<script>
new Vue({
el: '#app',
data: {
hide: false
}
})
</script>
</body>
</html>
結果如下:
能看到我嗎?1
注意,v-show
不支持 <template>
语法,也不支持 v-else
。
原文: https://www.w3cplus.com/vue/v-if-vs-v-show.html © w3cplus.com
v-if vs. v-show
在切换 v-if
块时,Vue.js 有一个局部编译/卸载过程,因为 v-if
之中的模板也可能包括数据绑定或子组件。
v-if
是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下,v-show
简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
一般来说,v-if
有更高的切换消耗而 v-show
有更高的初始渲染消耗。
因此,如果需要频繁切换 v-show
较好,如果在运行时条件不大可能改变 v-if
较好。
轉載自W3C《Vue.js 条件渲染》一文:https://www.w3cschool.cn/vuejs/d9bu1js7.html