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>
    
  • 相关阅读:
    svn命令
    samba配置
    查看登录用户who
    facl笔记
    计算100以内所有奇数的和以及所有偶数的和;分别显示之
    计算100以内所有能被3整除的正整数的和
    特殊权限:SUID,SGID,Sticky
    vi命令笔记
    nginx、fastCGI、php-fpm关系梳理(转载参考)
    Nginx + CGI/FastCGI + C/Cpp
  • 原文地址:https://www.cnblogs.com/jincanyu/p/14352942.html
Copyright © 2011-2022 走看看