如何遍历元素列表并在 VueJS 中显示？

Vue 是一个用于构建用户界面的渐进式框架。核心库仅专注于视图层，易于获取并与其他库集成。 Vue 还可以完美地结合现代工具和支持库来支持复杂的单页应用程序。

v-for指令用于循环遍历元素列表。语法采用item in items的形式，其中items是必须循环的数组， item用作当前迭代的元素的别名。

下面的例子演示了元素的循环：

示例 1：在此示例中，列表被迭代并显示。

index.html

  
  


  
    
      GeeksforGeeks
    
    Friends of Mine!
    
      
        {{friend}}
      
    
  
    

应用程序.js

const parent = new Vue({
  el: '#parent',
  data: {
    friends: [
      'Vikash', 'Deepak', 'Mukesh',
      'Harsh', 'Motiar', 'Raja'
    ]
  }
})

输出：

示例 2：在此示例中，包含对象的列表显示为表格。

索引.html

  
  


  
    
      GeeksforGeeks
    
    Courses Details!
    
      
        
        
        
      
      
        
        
        
      
    Course IdCourse NameInstructor{{Course.CourseId}}{{Course.CourseName}}{{Course.instructor}}
  
  

应用程序.js

const parent = new Vue({
    el: '#parent',
    data: {
      Courses: [
        {
          CourseId: '100A',
          CourseName: 'React.js',
          instructor: 'Stphen Grider'
        },
        {
          CourseId: '100B',
          CourseName: 'Vue.js',
          instructor: 'Maxmillian'
        },
        {
          CourseId: '100C',
          CourseName: 'Angular.js',
          instructor: 'Maxmillian'
        },
        {
          CourseId: '100D',
          CourseName: 'Java',
          instructor: 'Tim Buchikka'
        },
        {
          CourseId: '100E',
          CourseName: 'web Dev',
          instructor: 'Colt Stele'
        }
      ]
    }
})

输出：