Vue基础教程之条件渲染和列表渲染
目录
- 前言
- 1.1 作用
- 1.2 控制元素显隐的方式
- 1.3 初始渲染对比
- 1.4 切换消耗对比
- 1.5 使用场景对比
- 1.6 其他
- 2 v-if 和 v-for
- 2.1 v-if 和 v-for 不能同时用的原因
- 2.2 v-if 和 v-for 一起用的解决方案
- 3 列表渲染的 key 有什么用
- 总结
前言
什么是条件渲染？在我们的页面中会有很多这样的应用场景，比如说我们今天要上架一个活动，这个活动页面只在今天有效，在晚上的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 的条件渲染和列表渲染
这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记. 条件渲染 v-if 在 < template > 中配合 v-if 渲染一整组 在使用 v-if 控制元素的时候,我们需要将它添加到这个元素上去.然而如果要切换很多元素的时候,一个个的添加就太麻烦了.这时候就可以使用 < template > 将一组元素进行包裹,并在上面使用 v-if.最终的渲染结果不会包含 < template > 元素. <template
-
学习vue.js条件渲染
本文实例为大家分享了vue.js中条件渲染的练习代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>条件渲染</title> </head> <body> <!-- v-if 作为判断条件 如果满足则展示它所附着的元素的内容-->
-
Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 接下来给大家介绍vuejs单向绑定.双向绑定.列表渲染.响应函数基础知识,具体详情如下所示: (一)单向绑定 <div id="app"> {{ message }} </div> <sc
-
浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> <p v-if="type===1">拌面</p> <p v-else-if="type===2">扁肉</p> <p v-else="type===3">其它</p> </div
-
Vue.JS入门教程之列表渲染
你可以使用 v-repeat 指令来基于 ViewModel 上的对象数组渲染列表.对于数组中的每个对象,该指令将创建一个以该对象作为其 $data 对象的子 Vue 实例.这些子实例继承父实例的数据作用域,因此在重复的模板元素中你既可以访问子实例的属性,也可以访问父实例的属性.此外,你还可以通过 $index 属性来获取当前实例对应的数组索引. <ul id="demo"> <li v-repeat="items" class="ite
-
简单理解Vue条件渲染
一.v-if显示单个元素 注意else只能跟在v-if或者v-show后面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue条件渲染</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-sca
-
详解vuejs之v-for列表渲染
Vue.js是一个构建数据驱动的web界面的库.重点集中在MVVM模式的ViewModel层,因此非常容易与其它库或已有项目整合 Vue.js 的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单 如下列表展示,当我们从后端接口或者json文件使用ajax获取数据之后现实到页面,我们有n中方式去把数据渲染到页面 1.使用js的for循环去遍历填充 2.ng的ng-repeat 今天我们使用vue.js的v-for 一.html <div class="shop_list_box
-
vue.js实现条件渲染的实例代码
一.初探条件渲染 vue 的条件渲染,仍旧依赖于指令系统,下面逐个介绍: (1)v-if <div id="app"> <div v-if="c1">c1</div> </div> ...... var app = new Vue({ el: '#app', data: { c1: false } }); 当 c1 为真值的时候,渲染出 v-if 所绑定的元素,否则不渲染出该元素.渲染结果如下: <div id=
-
Vue基础教程之条件渲染和列表渲染
目录 前言 1.1 作用 1.2 控制元素显隐的方式 1.3 初始渲染对比 1.4 切换消耗对比 1.5 使用场景对比 1.6 其他 2 v-if 和 v-for 2.1 v-if 和 v-for 不能同时用的原因 2.2 v-if 和 v-for 一起用的解决方案 3 列表渲染的 key 有什么用 总结 前言 什么是条件渲染?在我们的页面中会有很多这样的应用场景,比如说我们今天要上架一个活动,这个活动页面只在今天有效,在晚上的24点或者说在明天早上凌晨0点1秒的时候就要把这个页面下下来,把这个
-
Vue条件渲染与列表渲染
目录 一.Vue条件渲染 v-show v-if v-else-if v-else v-if 与 template 小结 二.列表渲染 v-show key的作用 1.虚拟DOM中key的作用 2.对比规则 3.用index作为key可能会引发的问题 4.开发中如何选择key? react.vue中的key有什么作用?(key的内部原理) 一.Vue条件渲染 v-show <!--使用v-show做条件渲染--> <h1 v-show="false">{{nam
-
易语言基础教程之条件选择结构
语言结构(顺序结构.条件选择结构和循环结构)是面对过程化编程语言的核心,然而由于这三种编程结构很符合人类思维,因此在面向对象编程的易语言中也得到了充分的支持和应用.可以说,任何功能的实现,都离不开这三种编程结构.下面就一起来学习一下语言结构之条件选择结构的具体使用方法. 方法/步骤 首先我们先来了解一下易语言中条件选择结构的两种形式.为了说明问题,小编制作了如图所示的对比图. 据对比图,我们可以得到两条规律: 1."如果"条件语句只有条件判断为真时执行紧接着的下一条语句. 2.&quo
-
C语言菜鸟基础教程之条件判断
(一)if...else 先动手编写一个程序 #include <stdio.h> int main() { int x = -1; if(x > 0) { printf("x is a positive number!\n"); } else { printf("x is not a positive number!\n"); } return 0; } 运行结果: x is not a positive number! 程序分析: 定义一个整数
-
Python基础教程学习笔记 第二章 列表和元组
1.序列中元素的索引: 第一个元素索引是0,第二个是1,依次递增 最后一个元素索引是-1,倒数第二个是-2,依次递减 2.序列(Sequence)的种类: 列表(list).元组(tuple).字符串(string).Unicode 字符串.buffer对象.xrange对象 3.列表和元组的区别:列表可以进行修改,但是元组不行 4.tuple常作为字典的键 5.序列都可以进行以下操作: 索引(indexing).分片(sliceing).加(adding).乘(multiplying).以及检
-
解决Vue 通过下表修改数组,页面不渲染的问题
需要注意的是,Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法直接监听,因此,如果我们直接对数组元素赋值: vm.todos[0] = { name: 'New name', description: 'New description' }; 会导致Vue无法更新View. 正确的方法是不要对数组元素赋值,而是更新: vm.todos[0].name =
-
Vue.js学习教程之列表渲染详解
本文主要给大家介绍了关于Vue.js列表渲染的相关资料,分享出来给大家参考学习,下面来看看详细的介绍: v-for 可以使用 v-for 指令基于一个数组渲染一个列表.这个指令使用特殊的语法,形式为item in items,items 是数据数组,item 是当前数组元素的别名: 示例: <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li>
-
Vue全家桶入门基础教程
1. Vue概述 Vue(读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. 渐进式: 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 可以使用其中的一个或者多个 优点: 易用:熟悉HTML,CSS.JavaScript知识后,可快速上手Vue 灵活:在一个库和一套完整框架之间自如伸缩 高效:20kB运行大小,超快虚拟DOM 2. Vue的基本使用 2.1 传统开发模式对比 /