<>v-if的使用

Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。

v-if的原理:
v-if后面的条件为false时,对应的元素以及其子元素不会渲染。
也就是根本不会有对应的标签出现在DOM中。
<div id="app"> <h2 v-if="score>=90">优秀</h2> <h2 v-else-if="score>=80">良好</h2> <
h2 v-else-if="score>=60">及格</h2> <h2 v-else>不及格</h2> <h1>{{result}}</h1> </div>
data: { score:70 }, computed:{ result(){ let showMessage=''; if(this.score>=90){
showMessage='优秀'; } else if(this.score>=80){ showMessage='良好' } else if(this.
score>=60){ showMessage='及格'; } else{ showMessage='不及格'; } return showMessage; }
}
<>v-show的使用

v-show的用法和v-if非常相似,也用于决定一个元素是否要在界面中显示。
<div id="app"> <!-- dom元素不存在了 只要一次切换时使用 --> <h2 v-if="isShow" id="aaa">{{
message}}</h2> <!-- dom元素存在只是不显示 加了一个行内样式display:none 切换频繁时使用 --> <h2 v-show=
isShow id="bbb">{{message}}</h2> </div> data: { message: 'nihao', isShow:false }
<>开发中如何选择呢?

当需要在显示与隐藏之间切片很频繁时,使用v-show
当只有一次切换时,通过使用v-if

<>v-show 与 v-if 区别

相同点: 两者都是在判断DOM节点是否要显示。
不同点:

* 实现方式:
v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。
v-show只是在修改元素的css样式,也就是display的属性值,元素始终在Dom树上。
* 性能消耗:
v-if有更高的切换消耗,不适合做频繁的切换;
v-show有更高的初始渲染消耗,适合做频繁的切换;
* 编译过程:
v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;
v-show只是简单的基于css切换;
* 编译条件:
v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译;
v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素始终被保留;
<>v-for的使用

当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成。

v-for的语法类似于JavaScript中的for循环。
格式如下:item in items的形式。

<>v-for遍历数组
<!-- 在遍历过程中,获取索引值 --> <ul> <li v-for="(item,index) in names">{{index+1}}.{{item
}}</li> </ul> data: { names: ['海贼王', '东邪西毒', '星际穿越', '大话西游', '盗梦空间'] }
<>v-for遍历对象
<ul> <!-- value --> <li v-for="item in info">{{item}}</li> </ul> <ul> <!--
第一个都是value--> <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}<
/li> </ul> data: { info:{ name:'minmin', age:18, height:1.88 } }
<>v-for使用过程中添加key
<ul> <li v-for="item in letters">{{item}}</li> </ul> data: { letters:['A','B',
'C','D','E'], }

此时如果我希望在B C 之间插入一个F 元素,

真实DOM渲染到浏览器之前会经过一个虚拟DOM,
虚拟DOM里面会创建好多个li,此时创建5个,
再把虚拟DOM 中的东西patch到真实DOM上面

li1 -> A ======== li1 -> A
li2 -> B ======== li2 -> B
============== li6 -> F
li3 -> C ======== li3 -> C
li4 -> D ======== li4 -> D
li5 -> E ======== li5 -> E

对比真实DOM和虚拟DOM上面有哪些不同,发现多了F,然后把F插进去,这样性能会很高。
会有diff算法。Diff算法默认执行起来是这样的,一一替换的。即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率。
li1 -> A ======== li1 -> A
li2 -> B ======== li2 -> B
li3 -> C ======== li3 -> C === -> F
li4 -> D ======== li4 -> D === -> C
li5 -> E ======== li5 -> E === -> D
li6 -> =================li6 -> E

如果加了key,会提高性能。使用key来给每个节点做一个唯一标识。
Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

<li v-for="item in letters" :key="item">{{item}}</li>
绑定index没有什么意义,保证key和之后要绑定的元素是一一对应的,一旦插入F之后,原来的C的index是2,之后变成3,就不是一一对应的了。

如果有了key,优先把key和要展示的东西一一对应起来;没有key的时候,就会依次往后面排。

key的作用主要是为了高效的更新虚拟DOM。
用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,
而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,

<>v-if和v-for一起使用的弊端以及解决办法

由于v-for的优先级比v-if高,所以导致每循环一次就会去v-if一次,而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏,所以就会不停的去创建和销毁元素,造成页面卡顿,性能下降。必要情况下应该替换成computed属性。

解决办法:在v-for的外层或内层包裹一个元素来使用v-if

技术
©2019-2020 Toolsou All rights reserved,
最短路径Dijkstra (Python3)Thread.getContextClassLoader与Thread.getClassLoader()区别Vue el-select 获取label值SpringBoot 与JPA结合中 JpaRepository 里自定义查询Hack Bar 2.1.2 按F9没反应vue使用THREE.js创建一个可以控制的立方体latex中自定义的命令———\newcommand在vue+element-ui中,select选项值动态从后台获取,同时将选中值的id传给后台的方法(精华)2020年7月13日 微信小程序 页面间通信C#/.NET 系统优化专题(redis第六篇 数据结构【List】)