【Vue】零基础学习Vue: 第16课 Vue的v-for遍历生成标签指令：

遍历数组：

  
  Document
  


  

    

      
      
{{index}}--{{item}}
    
  

  
    let vm = new Vue({
      el:"#app",
      data: {
        arr:[1,2,3,4,5,6]
      },
      
    })
  

运行结果如下：

● 0–1 ● 1–2 ● 2–3 ● 3–4 ● 4–5 ● 5–6

v-for还可以遍历对象 如下：

  
  Document
  


  

    

      
      
{{key}}--{{item}}
    
  

  
    let vm = new Vue({
      el:"#app",
      data: {
        obj:{
          name:"小明",
          age:18,
          sex:"女"
        }
      },
      
    })
  

运行结果如下：

● name–小明 ● age–18 ● sex–女

v-for遍历对象括号内还有第3个属性：

v-for(item,key,index) in obj →第3个属性是下标数

v-for还可以遍历数字和字符串 如下：

  
  Document
  


  

    

      
      
{{index}}--{{item}}
      
      
{{index}}--{{item}}
    
  

  
    let vm = new Vue({
      el:"#app",
      data: {
      }
    })
  

运行结果如下：

0–1 1–2 2–3 3–4 4–5 —————————————————————————————— 0–a 1–b 2–c 3–d 4–e 5–f 6–g