列表渲染

1. v-for
   1. 基础列表渲染写法：

         <div v-for="(val,i) in 5">{{i}}-{{val}}</div>

   2. 循环中
      1. "," 前面的是 val 即循环出的结果
      2. "," 后面的是 索引值 键的值
   3. 列表渲染数据

         <div v-for="(val,key) in users">
            用户名： {{val.name}} 年龄： {{val.age}}
         </div>

   4. 条件加循环
      1. 注意我们不推荐在同一元素上使用 v-if 和 v-for
      2. 当它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量：
      3. 写法：

            <template v-for="(val,key) in users">
               <div v-if="val.age > 18">
                  用户名： {{val.name}} 年龄： {{val.age}}
               </div>
            </template>

   5. 对象循环 key 指的就是键的值 val 指的是 val 的值

         <div v-for="(val,key) in author">{{key}} : {{val}}</div>

2. 列表渲染之 key
   1. .prevent 阻止表单提交事件
   2. 打乱顺序出现错位
      1. 在写 for 循环的时候没有指定 key
      2. key 属性是在 vue 内部中使用 并没有在标签中体现出来
      3. 如果你使用索引值作为 key 的 val 值 那么指定的 key 就没有意义
      4. key 的值在选择的时候一般选择唯一标识 属性 (例如：身份证号， 电话号码， 邮箱账号 ，id 等等唯一属性)
      5. 没有 key 的值在渲染的过程中就可能出错
      6. v-for中设置key的原因：
         1. 提高渲染的效率
         2. 避免渲染的时候出错
3. diff 算法 dom 对比算法