【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