vue的品牌管理案例

vue的品牌管理案例

	<div id="app">
		<label>
			<span>id:</span>
			<input type="text" v-model="id" />
		</label>
		<label>
			<span>name:</span>
			<input type="text" v-model="name" @keyup.f2="add" />
		</label>
		<label>
			<input type="button" value="添加" @click="add" v-fontsize="'20px'" v-color="'red'" />
		</label>
		<label>
			<span>search:</span>
			<input type="text" v-focus v-model="keywords"/>
		</label>
		
		<table border="0" cellspacing="0" cellpadding="0">
			<tr>
				<th>序号</th>
				<th v-colors="'blue'">名称</th>
				<th>时间</th>
				<th>操作</th>
			</tr>
			<tr v-for="item in search(keywords)">
				<td>{{item.id}}</td>
				<td>{{item.name}}</td>
				<td>{{item.time | dateFilter('') }}</td>
				<td><a href="" @click.prevent="del(item.id)">删除</a></td>
			</tr>
		</table>
	</div>
	
	
	
	
	<script type="text/javascript">
		
		// filter 格式化时间
		Vue.filter('timeOut',function(dateStr,timetext){
			var dt = new Date(dateStr);
			var y = dt.getFullYear();
			var m = dt.getMonth();
			var d = dt.getDate();
			if(timetext.toLowerCase() == 'yyyy-mm-dd'){
				return y+'-'+m+'-'+d;
			}else{
				var h = dt.getHours();
				var mm = dt.getMinutes();
				var s = dt.getSeconds();
				return y+'-'+m+'-'+d+' '+h +':'+mm+':'+s;
			}
		})
		
		// 按键修饰符
		Vue.config.keyCodes.f2 = 113;
		
		// 自定义全局指令-焦点事件
		Vue.directive('focus',{
			inserted:function(el,binding){
				el.focus();
			}
		});
		Vue.directive('colors',{
			inserted:function(el,binding){
				el.style.color = binding.value;
			}
		})
		
		var vm = new Vue({
			el:'#app',
			data:{
				id:'',
				name:'',
				keywords:'',
				list:[
					{id:1,name:'奥迪',time:new Date()},
					{id:2,name:'宝马',time:new Date()},
				],
			},
			methods:{
				// 添加列表
				add:function(){
					this.list.push({id:this.id,name:this.name,time:new Date()})
				},
				// 删除列表
				del:function(id){
					// 根据id找索引
					
					// findIndex方法
					var index = this.list.findIndex(function(item){
						if(item.id == id){
							return item.id;
						}
					})
					this.list.splice(index,1)
					
					// some方法
					this.list.some((item,i)=>{
						if(item.id == id){
							this.list.splice(i,1)
						}
					})
					// 原生方法
					var that = this;
					this.list.forEach(function(item,i){
						if(item.id == id){
							that.list.splice(i,1)
						}
					})
						
					
				},
				// 关键词搜索
				search:function(keywords){
					// 字符串的indexOf方法
					var newList = [];
					this.list.filter(function(item){
						if(item.name.indexOf(keywords) !== -1){
							newList.push(item);
						}
					})
					return newList;
					
					
					// 字符串的includes方法
					return this.list.filter(function(item){
						if(item.name.includes(keywords)){
							return item;
						}
					})
				}
			},
			// 自定义私有过滤器
			filters:{
				dateFilter:function(dateStr,timeText){
					var dt = new Date(dateStr);
					var y = dt.getFullYear();
					var m = dt.getMonth();
					var d = dt.getDate();
					if(timeText.toLowerCase() == 'yyyy-mm-dd'){
						return y+'-'+m+'-'+d;
					}else{
						var h = dt.getHours();
						var mm = dt.getMinutes();
						var s = dt.getSeconds();
						return y+'-'+m+'-'+d+' '+h +':'+mm+':'+s+111;
					}
				}
			},
			// 自定义私有指令
			directives:{
				'fontsize':{
					bind:function(el,binding){
						el.style.fontSize = binding.value;
					}
				},
				'color':{
					bind:function(el,binding){
						el.style.color = binding.value;
					}
				}
			}
		})
	</script>
</body>