web前端全系列 教程
1839个小节阅读:2244.1k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
在 Vue
中,提供了条件渲染,这类似于JavaScript
中的条件语句
v-if
v-else
v-else-if
v-show
v-if
v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染
xxxxxxxxxx
<template>
<div v-if="flag">你能看见我么</div>
</template>
<script>
export default {
data() {
return {
flag:true
}
}
}
</script>
v-else
你也可以使用 v-else
为 v-if
添加一个“else 区块”
xxxxxxxxxx
<template>
<div v-if="flag">你能看见我么</div>
<div v-else>那你还是看看我吧</div>
</template>
<script>
export default {
data() {
return {
flag:false
}
}
}
</script>
v-else-if
顾名思义,v-else-if
提供的是相应于 v-if
的“else if 区块”。它可以连续多次重复使用
xxxxxxxxxx
<template>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</template>
<script>
export default {
data() {
return {
type: "D"
}
}
}
</script>
v-show
另一个可以用来按条件显示一个元素的指令是 v-show
。其用法基本一样
xxxxxxxxxx
<template>
<div v-show="flag">你能看见我么</div>
</template>
<script>
export default {
data() {
return {
flag:true
}
}
}
</script>
v-if
vs v-show
v-if
是“真实的”按条件渲染,因为它确保了在切换时,条件区块内的事件监听器和子组件都会被销毁与重建。
v-if
也是惰性的:如果在初次渲染时条件值为 false,则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
相比之下,v-show
简单许多,元素无论初始条件如何,始终会被渲染,只有 CSS display
属性会被切换。
总的来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要频繁切换,则使用 v-show
较好;如果在运行时绑定条件很少改变,则 v-if
会更合适
实时效果反馈
1. 在Vue中,关于v-if
和v-show
描述错误的是:
A v-if
是“真实的”按条件渲染,它确保了在切换时,条件区块内的事件监听器和子组件都会被销毁与重建
B v-if
也是惰性的:如果在初次渲染时条件值为 false,则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染
C v-show
元素无论初始条件如何,始终会被渲染,只有 CSS display
属性会被切换
D v-show
有更高的切换开销,而 v-if
有更高的初始渲染开销`
答案
1=>D