使用vue.js动态将行添加到表中

我学习vue.js，并用HTML和CSS创建了一种基本形式：

                       










    Mail:
    


    Date:
    

    
    
        
    
    


    Adress:
    
 

    Company:
    
 

    Number:
       
    


    

        
Mail
        
Date
        
Adress
        
Company
        
Number
    
    

        

          
{{ mail }}
          
{{ date }}
          
{{ adress }}
          
{{ company }}
          
{{ fliers }}
        
    



    

        Add a row
    
    

        Download
    

这是我的.js文件，到目前为止并没有做很多事情：

var app = new Vue({
 el: '#app',
 data: {
  mail:'',
  date:'',
  adress:'',
  company:'',
  fliers:''
}
})

提交数据时，此代码动态更新表的行。我想要达到的效果应该让我在按下蓝色按钮后输入更多行的数据。如何使用vue.js做到这一点？我在vue.js中找到了一些有关动态表的教程，但是我找不到适合我的案例的易于掌握的解决方案。

您应该进行以下更改：

在data属性中声明一个数组（称为rowData）

在中声明一个方法methods:（称为addItem）

在方法内部，从属性（邮件，日期，地址）填充Javascript对象

将对象推入rowData数组并清除模型属性

var app = new Vue({
  el: '#app',
  data: {
    mail:'',
    date:'',
    adress:'',
    company:'',
    fliers:'',
    rowData:[] //the declared array
  },
  methods:{
    addItem(){
      var my_object = {
        mail:this.mail,
        date:this.date,
        adress:this.adress,
        company: this.company,
        fliers: this.fliers
      };
      this.rowData.push(my_object)

      this.mail = '';
      this.date = '';
      this.adress = '';
      this.company = '';
      this.fliers = '';
    }
  }
})

  {{ item.mail }}
  {{ item.date }}
  {{ item.adress }}
  {{ item.company }}
  {{ item.fliers }}