跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • Vue 表单场景使用 v-if 和是 v-show
未分類
28 10 月 2020

Vue 表单场景使用 v-if 和是 v-show

Vue 表单场景使用 v-if 和是 v-show

資深大佬 : lvming6816077 5

例如表单逻辑有很多字段,但是这些字段有权限逻辑判断,即 A 用户看到的字段和 B 用户看到的字段不一样,所以就会涉及到使用 v-if 还是 v-show 来显示和隐藏一些字段。 但是涉及到提交时要做一些格式的校验,那这样就也需要做一下权限逻辑判断,如果用 v-if 的话就需要判断当前的表单控件对应的 model 是否存在,v-show 的话就不需要。 这里用哪种好一些呢?

大佬有話說 (2)

  • 資深大佬 : imydou

    v-show 就是 display: none 标签还在

  • 資深大佬 : jevonszmx

    官方文档:

    v-if vs v-show
    v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

    v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

    相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

    一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

    按照你的需求,不建议用 v-show,因为 v-show 是基于 css 切换显示和隐藏,查看 dom 内容就暴露了。

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具