Vue基础教程之条件渲染和列表渲染

 更新时间:2021年11月12日 17:13:14   作者:蜜瓜的前端进阶  
Vue会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做会使Vue变得非常快,下面这篇文章主要给大家介绍了Vue基础教程之条件渲染和列表渲染的相关资料,需要的朋友可以参考下

前言

什么是条件渲染?在我们的页面中会有很多这样的应用场景,比如说我们今天要上架一个活动,这个活动页面只在今天有效,在晚上的24点或者说在明天早上凌晨0点1秒的时候就要把这个页面下下来,把这个图片隐藏掉。如果我们安排一个运维兄弟手动去改HTML,那么运维兄弟就会疯掉的,其实这里就会有一个很简单的办法,就是条件的渲染,即当0点的时候我们去判断这个条件,如果这个条件达到了比如说24点或者是0点一个时间点,之后就把它隐藏起来,这个就是一个条件的渲染。

什么是列表渲染呢?这个就是最常见的,比如说在页面上有很多个元素,很多的图片,像新闻网站一次加载20条,如果用手敲去写HTML,那样新闻网站的人就不用去干活了,每天就去敲HTML代码了,这里面就会有类似于我们C语言代码里面的for循环那样,有一个循环语句在这个地方,让我们把这个页面的元素构建出来生成出来,这就是列表渲染。1 v-if 和 v-show

1.1 作用

都用来控制元素的显示和隐藏

1.2 控制元素显隐的方式

v-if控制虚拟DOM树上元素的创建和销毁,Vue的响应系统会根据虚拟DOM树对实际DOM进行更新,从而间接控制实际DOM上元素的显隐

v-show通过给元素添加样式display:none来让元素隐藏

1.3 初始渲染对比

v-if是惰性的,如果初始渲染条件为false,什么都不做;只有条件为true,才会开始编译

v-show不管初始渲染条件如何,元素始终被编译并保留,之后根据条件通过CSS切换

1.4 切换消耗对比

如果频繁切换显示与隐藏,v-if会频繁创建、销毁元素,而v-show只是切换样式

故v-if的切换消耗更高

1.5 使用场景对比

如果元素的显示隐藏在一开始就定下来不会再变了,使用v-if

如果元素需要频繁切换显隐,使用v-show

1.6 其他

  • v-if可以搭配template使用,v-show不可以
  • v-if可以搭配v-else,v-show无特殊语法

2 v-if 和 v-for

2.1 v-if 和 v-for 不能同时用的原因

为什么不能把v-if和v-for同时用在同一个元素上?

当 Vue 处理指令的时候,v-for的优先级比v-if高,因此这个模板:

<ul>
  <li v-for="item in list" v-if="item.isActive" :key="item.id">
    {{item.name}}
  </li>
</ul>

会经过如下运算:

this.list.map(function(item) {
  if (item.isActive) {
    return item.name
  }
})

我们每次重新渲染的时候都要遍历整个列表,即使isActive为true的item很少,这会带来性能方面的极大浪费,因此两者不能同时用在同一个元素上

2.2 v-if 和 v-for 一起用的解决方案

1、如果想控制整个列表的显隐,可以将v-if移动到容器元素上,比如:

<body>
  <div id="example">
    <ul v-if="listShow">
      <li v-for="item in activeItems" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      list: [
        { id: 1, name: "路飞", isActive: true },
        { id: 2, name: "索隆", isActive: false },
        { id: 3, name: "山治", isActive: true },
      ],
      listShow: false,
    }
  });
</script>

2、如果想过滤列表中的项目,可以使用计算属性(computed)返回过滤后的列表,比如:

<body>
  <div id="example">
    <ul>
      <li v-for="item in activeItems" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      list: [
        { id: 1, name: "路飞", isActive: true },
        { id: 2, name: "索隆", isActive: false },
        { id: 3, name: "山治", isActive: true },
      ],
    },
    computed: {
      activeItems: function () {
        return this.list.filter((item) => item.isActive);
      },
    },
  });
</script>

3 列表渲染的 key 有什么用

在使用v-for进行列表渲染时,必须给元素添加一个key属性,并且这个key必须是唯一标识

<ul>
 <li v-for="item in list" :key="item.id">{{item.name}}</li>
</ul>

我们知道,Vue 在更新元素时,不会直接操作真实DOM(渲染真实DOM开销是很大的),而是根据新数据生成新的虚拟 DOM,然后对新旧虚拟DOM进行差异对比,根据对比结果进行DOM操作来更新视图

列表渲染时,如果有key属性,由于它是唯一标识,在对比两个新旧节点时若key不同也就没有深入对比的必要了。

为什么不能用index作为key?因为index是不稳定可变的,比如删除了列表第一个元素,会导致后面的元素index发生变化,从而导致key发生变化。这时,Vue 在对比新旧节点时,遇到key相同的节点,就会进行深入对比,发现节点内容发生了变化,就会去创建新的真实DOM用来替换原来的真实DOM。原本只需要删除真实DOM中第一个元素的操作,会变成新建、替换后续所有真实DOM,造成性能的极大浪费

总结

到此这篇关于Vue基础教程之条件渲染和列表渲染的文章就介绍到这了,更多相关Vue条件渲染和列表渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue状态管理之使用Pinia代替Vuex

    Vue状态管理之使用Pinia代替Vuex

    这篇文章主要介绍了Vue状态管理。下面文章主要围绕着使用Pinia代替Vuex的相关资料展开具体内容,需要的朋友可以参考一下,希望对你有所帮助
    2021-11-11
  • vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

    vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

    这篇文章主要介绍了vue-video-player,通过自定义按钮组件实现全屏切换效果,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • vue路由监听的一些常用方式

    vue路由监听的一些常用方式

    有时在页面刷新或者返回等操作时,想监听路由变化进行数据更新等操作,下面这篇文章主要给大家介绍了关于vue路由监听的一些常用方式,需要的朋友可以参考下
    2023-10-10
  • Vue项目部署上线全过程记录(保姆级教程)

    Vue项目部署上线全过程记录(保姆级教程)

    vue项目开发完毕后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目,下面这篇文章主要给大家介绍了关于Vue项目部署上线的相关资料,需要的朋友可以参考下
    2023-03-03
  • vue.js评论发布信息可插入QQ表情功能

    vue.js评论发布信息可插入QQ表情功能

    这篇文章主要为大家详细介绍了vue.js评论发布信息可插入QQ表情功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Vue的移动端多图上传插件vue-easy-uploader的示例代码

    Vue的移动端多图上传插件vue-easy-uploader的示例代码

    这篇文章主要介绍了Vue的移动端多图上传插件vue-easy-uploader的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vuejs 实现简易 todoList 功能 与 组件实例代码

    Vuejs 实现简易 todoList 功能 与 组件实例代码

    本文通过实例代码给大家介绍了Vuejs 实现简易 todoList 功能 与 组件,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • 一文搞懂Vue3中toRef和toRefs的区别

    一文搞懂Vue3中toRef和toRefs的区别

    toRef 和 toRefs都是Vue3 中的响应式转换工具函数,换句话说,toRef 和 toRefs 就是用来创建响应式的引用的,主要用来取出响应式对象里的属性,或者解构响应式对象,本文小编就来带大家搞清楚Vue3中toRef和toRefs的区别,需要的朋友可以参考下
    2023-09-09
  • 解决el-date-picker 宽度溢出浏览器的问题

    解决el-date-picker 宽度溢出浏览器的问题

    这篇文章主要介绍了解决如何el-date-picker 宽度溢出浏览器问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

    uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

    网上百度uniapp使用vant时,很多答案都是在根路径下创建文件夹,而且都是基于小程序环境的,其实uniapp可以直接使用的,这篇文章主要给大家介绍了关于uni-app项目中引入Vant UI组件库完美避坑指南的相关资料,需要的朋友可以参考下
    2024-02-02

最新评论