zoukankan      html  css  js  c++  java
  • v-for详解

    v-for的引入

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

    v-for遍历数组

    • 格式:v-for="(item, index) in items"。(也许是因为item显得更加重要,所以将item排在前面)
      • 格式说明:index为可选参数,当不需要获取每一项的索引值时,可以省略index
    <ul>
        <li v-for="(item,index) in anime">{{index+1}}-{{item}}</li>
    </ul>
    
    data: {
        anime: ['进击的巨人', '狐妖小红娘', '天宝伏妖录', '东京食尸鬼'],
    

    v-for遍历对象

    • 格式:v-for="(value, key, index) in info"。(参数按照重要程度排序)
      • 参数说明:key和index为可选参数
    <ul>
        <li v-for="(value,key) in info">{{key}}:{{value}}</li>
    </ul>
    
    data: {
        info: {
            name: "super咖啡",
            age: 21,
            height: 1.68
         }
    

    v-for遍历数字

    • 格式:v-for="count in counts"
    • 注意:如果使用v-for迭代数字的话,前面 count 的值从 1 开始
    <p v-for="count in 10">这是第{{count}}次循环</p>
    

    v-for的key属性

    • 在我们使用v-for时,建议给对应的元素或组件添加一个key属性
    • 为何要添加一个key属性?主要目的就是为了高效的更新虚拟DOM

    • 假设要在一个节点列表abcde的bc之间插入一个新节点f.在添加key属性前,diff算法默认是将c更新成f,d更新成c,e更新成d,最后再插入e

    • 而在添加key属性后,key为每一个节点做了一个标识,diff算法可以准确高效的在要求的位置插入新节点

    • 为key赋的值必须要与元素具有一一对应的关系

    <li v-for="(item,index) in anime" :key="item">{{index+1}}-{{item}}</li>
    
  • 相关阅读:
    并发编程学习笔记(八、volitile)
    MySQL调优学习笔记(六、SQL查询优化)
    MySQL调优学习笔记(五、高性能索引)
    MySQL调优学习笔记(四、索引)
    MySQL调优学习笔记(三、数据库优化)
    MySQL调优学习笔记(二、MySQL调优基础)
    MySQL调优学习笔记(一、MySQL基础)
    密码-简单加密
    密码-这不是摩斯密码
    密码-聪明的小羊
  • 原文地址:https://www.cnblogs.com/jincanyu/p/14352942.html
Copyright © 2011-2022 走看看