vue学习小案例（一）：品牌列表案例

演示

目标区域代码（#app）：

用户进行添加查询操作的区域：

  

    
添加品牌
  
  

    
      Id:
      
    
    
      Name:
      
    
    
    
    
      搜索名称关键字：
      
    
  

数据展示区域：

  

    

      
Id
      
Name
      
Ctime
      
Operation
    
  
  

    
    

      
{{ item.id }}
      

      
{{ item.ctime }}
      

        删除
      
    
  

VM调度者：

var vm = new Vue({
  el: '#app',
  data: {
    id: '',
    name: '',
    keywords: '', // 搜索的关键字
    list: [
      { id: 1, name: '奔驰', ctime: new Date() },
      { id: 2, name: '宝马', ctime: new Date() }
    ]
  },
  methods: {
    add() { // 添加的方法
      var car = { id: this.id, name: this.name, ctime: new Date() }
      this.list.push(car);
      this.id = this.name = '';
    },
    del(id) { // 根据Id删除数据
      var index = this.list.findIndex(item => {
        if (item.id == id) {
          return true;
        }
      })
      this.list.splice(index, 1);
    },
    search(keywords) { // 根据关键字，进行数据的搜索
      return this.list.filter(item => {
        if (item.name.includes(keywords)) {
          return item;
        }
      });
    }
  }
});