zoukankan      html  css  js  c++  java
  • 关于指令 v-for 遍历

    <div id="test">
      <div>{{ arr}}</div>
      <div>{{ list}}</div>
    </div>

    var vue=new Vue({
      el:"#test",
      data:{
        arr:["a","b","c"],
        list:{
          "百度":"https://www.baidu.com/",
          "百度":"https://www.baidu.com/",
          "百度":"https://www.baidu.com/",
        }
      }
    });

    输出结果:

    数组遍历:

    1.只输出value

      <div id="test"><div v-for = "v in arr">{{v}}</div></div>  

    2.输出value和下标索引

      <div id="test"><div v-for = "(v,i) in arr">{{index}}{{v}}</div></div>

    json遍历:

    1.只输出value

    <div id="test"><div v-for = "v in list">{{v}}</div></div>  

    2.输出key,value

      <div id="test"><div v-for = "(v,k) in list">{{k}}{{v}}</div></div>

    2.输出key,value,index

      <div id="test"><div v-for = "(v,k,i) in list">{{i}}{{k}}{{v}}</div></div>

    区别:数组中,括号里的参数第一位是value值,第二位是索引值

         json中,第一位是value值,第二位是key值,第三位是索引值

    但行好事,莫问前程。
  • 相关阅读:
    explicit
    boolalpha 和 noboolalpha
    C++ 头文件一览
    C++ I/O库总结
    Error:collect2:ld returned 1 exit status (总结)
    常用目录的作用
    硬盘分区与硬软链接
    POJ3694 Network(Tarjan双联通分图 LCA 桥)
    2016"百度之星"
    2016"百度之星"
  • 原文地址:https://www.cnblogs.com/txhy/p/8244520.html
Copyright © 2011-2022 走看看