vue中过滤器的应用，增加删除及获取关键字

最新推荐文章于 2023-06-30 12:39:03 发布

Seven_drunk

最新推荐文章于 2023-06-30 12:39:03 发布

阅读量456

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Seven_drunk/article/details/94399398

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="bootstrap-3.3.7.css">
		<title></title>
	</head>
	<script src="vue-2.4.0.js"></script>
	
	<body>
	
		<div id="app">
 <div class="panel panel-primary">
		    <div class="panel-heading">
		      <h3 class="panel-title">添加品牌</h3>
		    </div>
		    <div class="panel-body form-inline">
		      <label>
		        Id:
		        <input type="text" class="form-control" v-model="id">
		      </label>
		
		      <label>
		        Name:
		        <input type="text" class="form-control" id="search" v-model="name" @keyup.enter='add'>
		      </label>
		
		      <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
		      <input type="button" value="添加" class="btn btn-primary" @click="add" v-fontsize="'14px'">
		
		      <label>
		        搜索名称关键字：
		        <input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color>
		      </label>
		    </div>
		  </div>
		
		
		
		  <table class="table table-bordered table-hover table-striped">
		    <thead>
		      <tr>
		        <th>Id</th>
		        <th>Name</th>
		        <th>Ctime</th>
		        <th>Operation</th>
		      </tr>
		    </thead>
		    <tbody>
		      <!-- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的 -->
		      <!-- 现在， 我们自定义了一个 search 方法，同时，把 所有的关键字，通过传参的形式，传递给了 search 方法 -->
		      <!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组中，返回 -->
		       <tr v-for="item in search(keywords)" :key="item.id">
		        <td>{{item.id}}</td>
		      	<td>{{item.name}}</td>
		      	<td>{{item.ctime|dataFormat()}}</td>
<!-- 						.prevent阻止页面跳动 -->
						<td>  <a href="" @click.prevent="del(item.id)" >删除</a></td>
						 
		      </tr>
		    </tbody>
		  </table>
		
		
		
		</div>
	<script>
		Vue.directive('color',{
			bind:function(el){
				el.style.color='red'
				// el.style.color=binding.value
			}
		})
		Vue.directive('focus',{
			//每当指令绑定在元素上时,会立即执行bind函数  在每个函数,第一个参数永远是el,表示被绑定的那个元素,这个el参数,是一个原生js对象
			bind:function(el){},
			//inserted表示元素插入到dom中,会执行
			inserted:function(el){
				el.focus()
			},
			//当vnode更新时
			updated:function(el){}
		}
		)
		//自定义键盘码
		// Vue.config.keyCodes.f2=113;
			Vue.filter('dataFormat',function(dataStr,pattern=''){
			var dt=new Date(dataStr);
			var y =dt.getFullYear();
			//转为填充为0的 先转化为toString字符串,再用padStart(2,'0')
			var m=(dt.getMonth()+1).toString().padStart(2,'0');
			var d=dt.getDate().toString().padStart(2,'0');
			// return `${y}-${m}-${d}`
			if(pattern.toLowerCase()=='yyy-mmm-ddd'){
				return `${y}-${m}-${d}`
			}else{
				var hh=dt.getHours();
				var mm=dt.getMinutes();
				var ss=dt.getMinutes();
				return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
			}
		})
		
			  // 创建 Vue 实例，得到 ViewModel
			  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(){
				 this.list.push({id:this.id,name:this.name,ctime:new Date()})
			 },
			 del(id){
				 //分析  根据id找到索引删除 ,找到索引,调用splice方法  splice可增添删除和替换  some()返回为true,终止
				 //arr.some(fn(item,index,arr)),item为正在处理的元素， index为正在处理的元素当然索引值
// 				 this.list.some((item,i)=>{
// 					 if(item.id==id){
// 						 this.list.splice(i,1);
// 						 return true;
// 					 }
// 				 })
				var index=this.list.findIndex(item=>{
						if(item.id==id){
							return true;
						}
					})
					this.list.splice(index,1)
			 },
		   search(keywords){
				 var newList=[];
				this.list.forEach(item=>{
					 if(item.name.indexOf(keywords)!=-1){
						 newList.push(item)
					 }
				 })
				 return newList
			 }
	    },
			directives:{
				'fontsize':function(el,binding){el.style.fontSize=binding.value}
			}
	  })
		// document.getElementById('search').focus
		// Vue.filter('过滤器的名称',function(data){})
	</script>
		
	</body>
	
</html>

在这里插入图片描述