条件渲染
主要有四个指令
- v-show：控制元素可视性，即是否增加样式
display=none - v-if/v-else-if/v-else：类似if/else-if/else的逻辑结构，进行条件判断，控制元素的可视性，注意这种方法会直接决定元素是否出现DOM树上，而非样式改变
< !--- n is a property of vue instance --- >
<div v-if="n===1">Angular</div>
<div v-else-if="n===2">React</div>
<div v-else-if="n===3">Vue</div>
<div v-else>guess</div>
< !--- v-else needs no js expr --- >
template的使用
假设有复数个元素的可视性判断条件相同，可以使用template来统一控制，这种情况下只能使用v-if
< !--- n is a property of vue instance --- >
<template v-if="n === 1">
<h2>Apple</h2>
<h2>Banana</h2>
<h2>Corn</h2>
</template>
列表渲染
使用v-for来遍历数组，对象，字符串或指定次数
<h2>遍历数组</h2>
<ul>
<li v-for="(p, index) in people" :key="index">
{{index}}: {{p.name}} - {{p.age}}
</li>
</ul>
< !--- --- >
<h2>遍历对象 - js对象是由k-v键值对组成的</h2>
<ul>
<li v-for="(v, k) in student" :key="k">
{{k}} - {{v}}
</li>
</ul>
key的作用
⬇️一图流说明key的作用⬇️
-
以索引作为key❌
解释：对于数组中的对象中来说，索引值并不是与其绑定的唯一标准。如图所示，由于数组更新后的第一条记录（即存储的对象）与先前的发生了变化，但是key值不变，而vue依据key值来判断是更新还是复用旧虚拟DOM上的元素
⚠️以第一条数据key='0'为例，其中的文本元素发生了变化，因此vue更新了其值；而输入框元素无变化，vue将选择复用旧DOM的元素，无论输入框内是否已经有输入的内容。以此类推，会得到一个错位的人员列表
-
以id为key(更好的效率，在此场景下推荐)✅
解释：对象的id是作为识别对象的唯一标识的最好选择，依照vue根据key值排查元素的机制，这样做很好地保证了顺序性，避免了错位，也节省了资源--因为vue实际上只更新了最后也是最新的那一行数据
-
结论：由此可知，在没有逆序增加/删除元素的情况下，使用index是没问题的