学习-Vue3-条件渲染
2024-10-20 17:27:23
- v-if支持在 <template> 元素上使用,能和 v-else 搭配使用。
- v-show 不支持在 <template> 元素上使用, 也不能和 v-else 搭配使用。
<template>
<!-- <template> 上的 v-if
因为 v-if 是一个指令,它必须依附于某个元素。但如果我们想要切换不止一个元素呢?
在这种情况下我们可以在一个 <template> 元素上使用 v-if,这只是一个不可见的包装器元素,最后渲染的结果并不会包含
这个 <template> 元素。-->
<template v-if="true">
<!-- 切换使得下面两段文字同时显示 -->
<p>第一行文字可以显示吗?</p>
<p>第二行文字可以显示吗?</p>
</template>
</template> <script setup> </script>
视图:
v-show 与 v-if 的区别:
v-show会在 DOM渲染中保留该元素,v-show仅切换了该元素上名为 display 的 CSS 属性。
v-if vs. v-show
v-if 是“真实的”按条件渲染,因为它确保了在切换时,条件区块内的事件监听和子组件都会被销毁与重建。
v-if 也是惰性的:如果在初次渲染时条件为 false,则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
相比之下, v-show 简单许多,元素无论初始条件如何,时钟会被渲染,只有CSS dispaly 属性会被切换。
总的来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要频繁切换,则使用 v-show 更好;如果在运行时绑定条件很少改变,则 v-if 会更合适。
v-if vs. v-for
warning: 同时使用 v-if 和 v-for 是不推荐的,因为这样二者的优先级不明显。
当 v-if 和 v-for 同时存在于一个元素上的时候,v-if 会首先被执行。
最新文章
- easyui 日期控件清空值
- 通过gradle来导入jar包
- oracle修改序列
- iOS开发之应用内检测手机锁屏,解锁状态
- Quiz(贪心,快速幂乘)
- ios抓包官方文档
- Sublime Text 2编译python时出错
- [BZOJ 1559] [JSOI2009] 密码 【AC自动机DP】
- hadoop实例
- Flask Jinjia2 与 react
- 深入理解Arrays.sort() (转)
- ExtJS与JQuery对照
- [Git]01 如何安装和配置
- NullpointerException处理
- 使用String. localeCompare比较字符串
- jquery tab切换
- 微信的NATIVE支付提示201商户订单号重复的解决方案
- Redis的数据结构之哈希
- SpringMVC拦截器详解
- 读书笔记(04) - 错误监控 - JavaScript高级程序设计