如果你喜欢我的文章，可以请我一杯咖啡:)
给我买咖啡
vue.js 条件渲染
v-if 和 v-show 指令用于有条件地渲染 vue.js 中的块。
v-如果
在vue.js中，指令v-if用于有条件地渲染块。仅当指令的表达式返回真值时才会渲染该块。
示例 :
import { ref } from 'vue'const show = ref(true) vue.js
登录后复制
您可以使用 v-else 指令来指示 v-if 的“else 块”。如果 v-if 指令 表达式不返回 true，则渲染 v-else 块。
import { ref } from 'vue'const show = ref(true) v-if directive
v-else directive
登录后复制
v-else-if
v-else-if，充当 v-if 的 “else if 块”。也可以多次链接。当 v-if 和 v-else-if 计算结果不为 true 时，v-else 指令被触发。
state 0: message 1
state 1: message 2
state 2: message 3
state 3: message 4
登录后复制
视频秀
当我们想要有条件地显示某个项目时，我们可以使用 v-show 指令作为另一个选项。
Ok!
登录后复制
不同之处在于带有 v-show 的元素始终会被渲染并保留在 dom 中。 v-show 更改 css 显示属性以显示或隐藏元素。 v-show 不能与 v-else 一起使用
v-if 与 v-show
v-if 是“真正的”条件渲染，因为它确保条件块内的事件侦听器和子组件在切换期间被正确销毁和重新创建。
立即学习“前端免费学习笔记（深入）”；
v-if ：如果初始渲染时条件为 false，则不会执行任何操作 – 条件块不会被渲染，直到条件第一次变为 true。
v-show 始终呈现并保留在 dom 中。 v-show 更改 css 显示属性以显示或隐藏元素。 v-show 不能与 v-else 一起使用
v-if 具有更高的切换成本，而 v-show 具有更高的初始渲染成本。如果您需要经常切换某些内容，则更喜欢 v-show；如果条件在运行时不太可能改变，则更喜欢 v-if。
结论
在本文中，我们研究了 v-if 和 v-show 指令的功能和差异。了解这些区别对于优化渲染性能和管理 vue.js 应用程序中的元素可见性至关重要。
以上就是Vuejs 条件渲染和 V-if 与 V-show的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2664113.html
