Vue实现列表的增删改查

一.html

      

    
      id:
        
      
      name:
        
      
      
      
        搜索名称关键字:
        
      
      


    


      

        

          
ID
          
NAME
          
CTIME
          
OPERATION
        
      
      

        
        
        
 
          
{{item.id}}
          
{{item.name}}
          
{{item.ctime}}
          

            删除
          
        
      
    
  

二.css

     th{
    width: 20%;
  }
  tr{
    text-align: center;
  }
  td{
    width: 20%;
  }

三.script

  let vm =new Vue({
el:"#app",
data:{
  list:[
    {id : 1, name:"奔驰",ctime:new Date()},
    {id : 2, name:"法拉利",ctime:new Date()}
  ],
  id:'',
  name:'',
  keywords:''
},
methods: {
  add(){
    let car = {id:this.id,name:this.name,ctime:new Date()}
    this.list.push(car)
    this.id=''
    this.name =''
  },
  del(id){
  //  this.list.some((item,i)=>{
  //   if(item.id ==id){
  //     this.list.splice(i,1)
  //     return true
  //   }
  //  }) 一种方法
  let index = this.list.findIndex(item =>{
    if(item.id ===id){
      return true
    }
  })
  this.list.splice(index,1)
  },
  // forEach,some,filter,findIndex都会对数组每一项，进行遍历
  search(keywords){
  //   let newList =[]
  //   this.list.forEach(item=>{
  //  if(item.name.indexOf(keywords) != -1){
  //    newList.push(item)
  //  }
  //   })
  //   return newList

   // includes('要包含的字符串')，如果包含，返回true
   let newList =this.list.filter(item=>{
     if(item.name.includes(keywords)){
       return item
     }
   })
  return newList
  },
 
  },
 })