案例篇：品牌管理案例实现

案例篇：品牌管理案例实现

第一步--初始化：

• 引入资源：
  
  
• 创建容器
  
• 创建对应实例

第二步--案例需求分析：

• 品牌的添加功能
• 品牌的删除功能
• 品牌的搜索功能

第三步--编写HTML结构：

            

                

                    

                        
Id
                        
Name
                        
Ctime
                        
Ope
                        
                    
                
                

                    

                        

                    
                
            
        

第四步--添加功能：

• 编写HTML结构，用表格进行渲染；
• 在data中编写几组假数据；
• 通过v-for循环将假数据循环渲染到页面上；
• 获取到 id 和name，直接从data上面获取；
• 组织一个对象；
• 把这个对象，调用数组的相关方法，添加到当前data上的list中去
• 注意：在vue中已经实现了数据的双向绑定，每当我们修改了data中的数据，vue会默认监听到数据的改动，自动把最新的数据映射到页面上。
• 当我们意识到上面的第四步，就证明你明白了vue的世界。我们更多的是在进行 VM 中model 数据的操作，同时，在操作model数据的时候，指定的业务逻辑操作。

add(){ //添加的方法
                    var car = {id:this.id,name:this.name,Ctins:new Date()}
                    this.list.push(car)
                    this.id=this.name=''
                    
                }

第五步--删除功能：

• 根据id删除数据；
• 如何根据id找到要删除这一项的索引；
• 如果找到了索引，直接调用数组的splice方法
• 在数组的some方法中，如果return true，就会立即终止这个数组的后续循环；

del(id){//根据id删除数据
                 this.list.some((item,i)=>{
                     if(item.id==id){
                         this.list.splice(i,1)
                         return true
                     }
                 })
                 
             }

• 使用 findIndex专门查找索引

var index=this.list.findIndex(item=>{
                 if (item.id==id) {  
                     return true
                 }
                })
                this.list.splice(index,1)

第六步--搜索功能：

• 之前 v-for 中的数据都是从data 上的list中直接渲染过来的。
• 现在，我们自定义了一个search 方法，同时把所有的关键字通过传参的方式传递给了search方法。
• 在 search 方法内部，通过执行for循环把所有符合搜索关键字的数据保存到一个新的数组中

search(keywords){//根据关键字搜索
              var newList=[]
              this.list.forEach(item=>{
                  if(item.name.indexOf(keywords)!=-1){  // 如果item包含
                      newList.push(item)
                  }
              })
              return newList
          }

• 注意：foreach、some、filter、findIndex这些都属于数组的新方法，都会对数组进行遍历。执行相关操作。
• ES6 中为字符串提供了一个新方法，叫做 String.prototype.include(要包含的字符串)。
  • 如果包含，返回true
  • 否则，返回false

return newlist=this.list.filter(item=>{
                 if (item.name.includes(keywords)) {
                   return item
                 }
             })

第七步--时间格式化功能：

• 分析：
  • 使用过滤器

  
                     {{ item.id }}
                     {{ item.name }}
                     {{ item.Ctins|dataformat() }}
                     
                         删除
                     
                 
  

Vue.filter('dataformat',function(datastr,pattern=""){
          // 根据给定的时间字符串，得到特定的时间
          //yyyy-mm-dd
          var dt = new Date(datastr);//获取当前时间
          var y = dt.getFullYear()//获取年
          var m = dt.getMonth()+1;//获取月份
          var d = dt.getDate()
//          return y+'-'+m+'-'+d
//          return `${y}-${m}-${d}`

          if(pattern.toLowerCase()==='yyyy-mm-dd'){
            return y+'-'+m+'-'+d              
          }else{
              var hh = dt.getHours()
              var mm=dt.getMinutes()
              var ss = dt.getSeconds()
              return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
          }
      })

源码：

    
        
        
        
        
    
    
        

            

                

                    
添加品牌
                    
                
                
                

                    ID：
                        
                    
                    Name：
                        
                    
                    
                        
                    搜索关键字：
                        
                    
                
            
            

                

                    

                        
Id
                        
Name
                        
Ctime
                        
Ope
                        
                    
                
                

                    

                        
{{ item.id }}
                        
{{ item.name }}
                        
{{ item.Ctins|dataformat() }}
                        

                            删除