品牌管理项目-简单（没有连接数据库）

<template>   
<div>      
 <div>           
  <div>               
    <h3>添加品牌</h3>          
  </div>          
  <div width="100%">              
    <label for="">                 
      Id:                   <
      input type="text" v-model="id">                
     </label>                
      <label for="">                  
        Name:                   
        <input  v-color="'red'" type="text" v-model="name" @keyup.enter="add">                
       </label>                 
        <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参 -->                
       <input  type="button" value="添加" @click="add()">                <label for="">                   
       搜索名称关键字:                 
        <!-- 注意：Vue中所有的指令，在调用的时候都以v-开头 -->                   <input type="text" v-model="keywords" v-focus v-color="'blue'">                </label>           
       </div>       
     </div>      
     <table width="100%" border="1px" cellspacing="0" cellpadding="0">         
           <thead width="100%">           
               <tr>                
                   <th >Id</th>                
                   <th>Name</th>                  
                   <th>Ctime</th>                   
                   <th>Operation</th>              
                 </tr>         
              </thead>          
             <tbody>              
                   <tr v-for="item in list" :key="item.id">                   
                    	<td>{{item.id}}</td>                  
                    	<td v-text="item.name"></td>                   
                        <td>{{item.ctime | dateFormat('')}}</td>
                        <td><a href="" @click.prevent="del(item.id)">删除</a></td>               
		    </tr>           
	    </tbody>       
	</table>      
    </div>
</template>
<script>
	export default{    
	data(){        
		return{            
			content:"你好",            
			id:'',            
			name:'',           
			 keywords:'',//搜索关键字            
			 list:[                
				 {id:1,name:'奔驰',ctime:new Date(),	
				 {id:2,name:'宝马',ctime:new Date()}  
			     ],        
			  }    
		},    
		// 使用 Vue directives 局部自定义指令 v-focus   
		 // 参数1：指令名称，注意：在定义的时候，指令名称前面，不需要加v-前缀    
		 // 但是，在调用的时候，必须在指令名称前面加上v-前缀来进行调用    
		 directives:{        
		 focus:{            
		 bind(el){               
		  // 每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次                
		  // 注意：在每个函数中，第一个参数，永远是el，表示被绑定了指令的那个元素，这个el参数，是一个和原生的js对象               
		   // 在元素刚绑定指令的时候，还没有插入到DOM中去，这时候调用docus方法没用                
		   //因为，一个元素，只有在插入到DOM后，才能获取焦点                            },           
		    inserted(el){               
		     // inserted表示元素 插入到DOM中的时候，会执行 inserted 函数，只触发一次          
		       el.focus();         
		        //和JS行为相关的操作，最好在inserted中去执行，防止JS行为不生效            },         
		     updated(el){             
		         // 当VNode更新的时候，会执行updated ，可能会触发多次            },       
		     componentupdated(el){             
		         // 所在组件的VNode及其孩子的VNode全部更新时调用            },           
		      unbind(el){              
		           // 只调用一次，指令与元素解绑            }        },       
	color:{          
		     bind(el,binding){                
		     //样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联样式              
		    //将来元素肯定是会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用这	
 		// el.style.color=
 			// 和样式相关的操作一般可以在bind中使用              
		       el.style.color=binding.value    

},        
  },    
		    // 过滤器  
	 filters:{      
		dateFormat:function(dateStr,pattern){   
		   //根据给定的时间字符串，得到特定的时间   
		  var dt=new Date(dateStr)          
		  var y=dt.getFullYear()      
		  var m=dt.getMonth()+1      
		  var d=dt.getDate()
		  if(pattern.toLocaleString()==='yyyy-mm-dd'){                
		             return `${y}-${m}-${d}`  }else{                
		             var hh=dt.getHours()       
		             var mm=dt.getMinutes()                
		             var ss=dt.getSeconds()                                
		             return `${y}-${m=m>9?m:"0"+m}-${d=d>9?d:"0"+d} ${hh}:${mm=mm>9?mm:"0"+mm}:${ss=ss>9?ss:"0"+ss}`     
		}            
		// return `${y}-${m}-${d}`         }    },  
	  methods:{        
	  	add(){            
	  	//1.获取到id和name，直接从data上获取        
	 	 //2.组织出一个对象            
	 	 //3.把这个对象，调用数组的方法，添加到当前的data上的list中            
	 	 //4.注意在vue中已经实现了数据的双向绑定，每当我们修改了data中的数据，vue会默认监听到数据的改动，自动把最新的数据，应用到页面
		//5.当我们意识到上面的第四步的时候，就证明大家已经入门vue了，我们更多的是进行VM中Modle数据的操作，同时，在操作Model数据的时候，指定业务逻辑操作
            var car={id:this.id,name:this.name,ctime:new Date().toLocaleString()}  
            this.list.push(car)            
            this.id=this.name=''        },        
            del(id){            
            //1.如何根据id，找到要删除这一项的索引            
            //2.如果找到了索引，直接调用数组的splice方法            
            // this.list.some((item,i)=>{            
            //     if(item.id==id){            
            //         this.list.splice(i,1)            
            //         
            //在数组some方法中，如果return true，就会立即终止这个函数的后续循环           //         return true;            
            //     }            
            // })            
            // 删除的第二种方式findIndex可以查找索引           
             var index=this.list.findIndex(item=>{
                             if(item.id==id){              
                                   return true;           
                                  }          
                            })          
                              console.log(index)
                               this.list.splice(index,1) 
             } 
       }}
       </script>
       <style scoped>
       thead{width:100%;}
       thead th{width:25%;}
       </style>