Vue 基础自查——条件渲染和列表渲染
v-if
和v-show
的区别是什么?v-if
和v-for
为什么不能一起用?v-for
中的key
有什么作用?
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学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染
Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- react 入坑笔记(五) - 条件渲染和列表渲染
条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
- vue学习笔记(五)条件渲染和列表渲染
前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...
- Vue.js学习 Item7 -- 条件渲染与列表渲染
v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- vue的条件渲染和列表渲染介绍
一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...
- vue 条件渲染与列表渲染
本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...
- vue class与style绑定、条件渲染、列表渲染
列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...
随机推荐
- disruptor笔记之一:快速入门
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- web 阶段的一些简答题
1.jsp 9个隐含对象 2. jsp 4大域对象 3.mybatis 中 #{} %{ } 的区别于联系 4. Servlet容器默认是采用单实例多线程的方式处理多个请求的: 5.Cookie 与S ...
- nginx 利用return实现301跳转
第一种: server { location / { rewrite ^/(.*)$ http://www.baidu.com/$1 permanent; } } 第二种: server { loca ...
- 基于AM335X,如何搭建优良的Linux开发环境(下)
接着上一篇文章的Linux开发环境搭建,文章中详细讲解了 VMware14.1.1虚拟机安装.基于虚拟机安装Ubuntu14.04.3操作系统.安装Ubuntu14.04.3操作系统.安装虚拟机工具. ...
- CF280C-Game on Tree【数学期望】
正题 题目链接:https://www.luogu.com.cn/problem/CF280C 题目大意 \(n\)个点的一棵树,每次选择一个没有染色的点把它和它的子树染黑,求期望全部染黑的步数. 解 ...
- Python编码规范(养成好的编码习惯很重要)
学习过程养成良好的编码习惯 1. 类名采用驼峰命名法,即类名的每个首字母都大写,如:class HelloWord,类名不使用下划线 2. 函数名只使用小写字母和下划线 3.定义类后面包含一个文档字符 ...
- Javascript设计模式之原型模式、发布订阅模式
原型模式 原型模式用于在创建对象时,通过共享某个对象原型的属性和方法,从而达到提高性能.降低内存占用.代码复用的效果. 示例一 function Person(name) { this.name = ...
- css 弹性盒子--“垂直居中”--兼容写法
使用弹性盒子兼容低端适配有时需要: display:flex 和 display:-webkit-box display: -webkit-box; -webkit-box-align: cent ...
- NOIP 模拟六 考试总结
T1辣鸡 T1就搞得这莫不愉快.. 大致题意是给你几个矩形,矩形覆盖的点都标记上,每个矩形无重复部分,求满足(x,y) (x+1,y+1)都标记过的点对数,范围1e9. 看起来很牛的样子,我确实也被1 ...
- dbus客户端使用指南
DBus是Linux使用的进程间通信机制,允许各个进程互相访问,而不需要为每个其他组件实现自定义代码.即使对于系统管理员来说,这也是一个相当深奥的主题,但它确实有助于解释linux的另一部分是如何工作 ...