美文网首页
v-if vs v-show vs v-for

v-if vs v-show vs v-for

作者: 拾钱运 | 来源:发表于2020-04-05 12:08 被阅读0次

v-if是“真正”的条件渲染,因为在切换过程中条件内的事件监听器和子组件的会被适当的销毁和重建
v-show 不管初始条件市什么,元素总是被渲染,并且知识简单的基于css进行切换

v-if有更高的切换开销,而v-show有更高的初始渲染开销。
总结:v-if :用于条件很少改变的时候
v-show:用于频繁切换的时候
注意: v-show不支持<template>,v-if支持<template>
不推荐v-if,v-for一起使用,v-for具有比v-if更高的优先
v-if v-for 示例

//不推荐的使用
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

将会如下运算

//如果只想渲染出一部分元素,每次重渲染的时候也要遍历整个列表,不论users是否发生变化
this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})
//推荐使用计算属性
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}
//
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

这样使用的好处:

  • 过滤后的列表只会在users数组发生变化时才被重新运算,过滤更高效
  • 使用v-for =“user in activeUsers”之后,我们在渲染的时候只会遍历满足条件的用户,渲染更高效
  • 解耦渲染层的逻辑,可维护性(对逻辑的更改和扩展)更强

相关文章

  • Vue2学习笔记:vue条件渲染

    一、v-if ①template v-if ②v-else ③v-show 二、v-if vs v-show 学好...

  • v-if vs v-show vs v-for

    v-if是“真正”的条件渲染,因为在切换过程中条件内的事件监听器和子组件的会被适当的销毁和重建v-show 不管初...

  • Vue指令汇集

    v-html v-bind v-once v-on v-if v-show v-if vs v-showv-if ...

  • Vue学习笔记4

    条件渲染 v-if v-else v-show v-if vs v-showv-if 是“真正”的条件渲染,因为它...

  • 五、Vue的条件渲染(v-if、v-show、v-for指令)

    五、Vue的条件渲染(v-if、v-show、v-for指令)v-if(控制DOM的存在与否)、v-show(控制...

  • vue html css css3相关知识点整理(持续更新中..

    1.v-if VS v-show:v-if适合运营条件不大可能改变;v-show适合频繁切换。 2.DOM中设置自...

  • 2018-05-30

    内部指令 1、v-if v-else v-show 指令v-if="isLogin"2、v-for指令 :解决...

  • 入门指令2

    通过帮顶css赋予样式 v-for 练习:添加成员 v-if和v-show v-if补充

  • vue笔记

    v-if vs v-show: v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组...

  • vue:vue2.x学习笔记

    v-if vs v-show v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件...

网友评论

      本文标题:v-if vs v-show vs v-for

      本文链接:https://www.haomeiwen.com/subject/yzfuphtx.html