Vue学习第五章-条件判断与循环遍历

条件判断与循环遍历

1.条件判断

vue的条件判断跟其他语言的if else 大同小异。
语法：v-if='条件' v-else v-else-if='条件'
无语法糖。
与v-if类似的还有 v-show='条件',两者的区别v-if的条件为false时，对应的元素不会存在于dom而v-show则始终存在。因此v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

什么是DOM？

DOM就是文档对象模型，什么是文档对象模型？
HTML的文档document页面是一切的基础，没有它dom就无从谈起。当创建好一个页面并加载到浏览器时，
DOM就悄然而生，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。在这个文档对象里，
所有的元素呈现出一种层次结构(也可理解成树状结构)，其中作为根节点。

---

咳咳，回归主题，让我们看看怎么使用v-if吧

  
{{message+name}}
  
现在显示的是我
  
{{message+name}}

v-else-if="" 同理使用。

条件渲染案例

实操之前补充的小姿势(知识)点：

Vue在进行DOM渲染之前会先创建一个虚拟DOM，互斥的标签会进行复用即全部照搬过来就改个名字儿子，此时要用key来区别，key的作用主要是表达这两个元素是完全独立的，不要复用它们。diff算法详细讲解请看here

  
    用户账号
    
  
  
    用户邮箱
    
    
  
  切换登录

如果不加key，则在切换登录的时候，用户账号输入框里输入的内容会原封不动的放到用户邮箱输入框那里。

---

2.循环遍历

这里循环的用法也跟其他语言差不多。
语法：v-for='循环体'
无语法糖
在使用v-for的时候一般要动态绑定key以防发送冲突。

---

v-for遍历数组
info:{ list:[1,2,3,4,5,6] }

{{value}}-{{index}}

(还记得动态绑定属性吗)
v-for遍历对象
info:{ message: 'hailo', name: 'hang' }

{{value}}-{{key}}-{{index}}

---

补充的小知识点：v-for为什么要动态绑定key

比如我们想要插入的数据是这样的：

而vue的虚拟DOM的Diff算法在插入数据时是这样的

即把C更新成F，D更新成C，E更新成D，最后再插入E。
增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM

---

我们来小结一下吧
v-if的key是告诉虚拟DOM不要对我们的组件进行复用。
v-for的key是为了高效的更新虚拟DOM。