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自定义指令实现仅支持输入数字和浮点型的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue中对window.openner的使用,vue使用window.open()跳转页面的代码案例，本文通过实例代码给大家详细讲解，需要的朋友可以参考下2022-11-11
本篇文章主要介绍了用Vue.extend构建消息提示组件的方法实例，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要给大家介绍了关于vue如何调用浏览器分享的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了Vue组件间的双向绑定，我们都知道当父组件改变了某个值后，如果这个值传给了子组件，那么子组件也会自动跟着改变，但是这是单向的，使用v-bind的方式，即子组件可以使用父组件的值，但是不能改变这个值2023-03-03
这篇文章主要介绍了vue使用file-saver本地文件导出,大家需要安装xlsx和file-saver，然后创建localExports.js文件，具体实现代码跟随小编一起看看吧2022-01-01
Vue 3引入了Composition API，这是一套新的API用于编写组件，作为Options API的替代，这篇文章主要介绍了如何优化 Vue.js 应用程序,需要的朋友可以参考下2023-02-02
这篇文章主要给大家介绍了关于vue路由守卫及路由守卫无限循环问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
今天小编就为大家分享一篇Vue2 监听属性改变watch的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
如何用vue3+Element plus实现一个完整登录功能
要实现用户的登录功能,可以使用Vue3和Element Plus,下面这篇文章主要给大家介绍了关于如何基于Vue3和Element Plus组件库实现一个完整的登录功能,文中提供了详细的代码示例,需要的朋友可以参考下2023-10-10
最新评论