Vue假数据应用——表格的添加、删除、搜索

  1. 首页    /
  2. 新闻资讯    /
  3. 正文

Vue实现假数据的添加、删除、搜索
Vue假数据应用——表格的添加、删除、搜索

HTML

<html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../lib/vue.js" ></script> <link  href="../lib/bootstrap.min.css" /> <!--引入bootstrap框架来写样式--> </head> <body> <div id="app">  			<div class="panl panel-primary"> 				<div class="panel-heading"> 					<h3 class="panel-title">添加品牌</h3> 				</div>  				<div class="panel-body"> 					<div class="panle-body form-inline">  						<lebel> 							Id:<input type="text" class="form-control" v-model="id" /> 						</lebel>  						<lebel> 							name:<input type="text" class="form-control" v-model="name" /> 						</lebel>  						<!---在vue中，使用事件绑定机制，为元素，指定处理函数的时候，如果加了小括号，就可以给函数传参了--> 						<input type="button" value="添加" class="btn btn-primary" @click="add()" />  						<lebel> 							搜索名称关键字:<input type="text" class="form-control" v-model="keywords" /> 						</lebel>  					</div> 				</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 v-text="item.name"></td> 						<td>{{ item.ctime }}</td> 						<td> 							<a href="" @click.prevent="del(item.id)">删除</a> 						</td> 					</tr> 				</tbody> 			</table>  		</div>  </body> </html>

Javascript

<script>  var vm=new Vue({ el:'#app', data:{   id:'',   name:'',   keywords:'',   list:[{      id:1,      name: "大众", 	ctime: new Date() 	}, 	{ 	id: 2, 	name: "宝马", 	ctime: new Date() 	}, 	{ 	id: 3, 	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 = '' //添加后就为空 		},  /* 根据id删除数据(两个方法) 方法1,如何根据id,找到要删这一项的索引 方法2,如果找到索引了,直接调用数组的splice方法 */ del(id){   /*         this.list.some((item,i)=>{			//数组some（）方法中，返回true，就终止这个数组的后续循环 			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) { //根据关键字，进行数据的搜索    return this.list.filter(item => {    	//在ES6中，为字符串提供了个新方法，加做String.prototype.includes('要包含的字符串') 	//如果包含，则返回true，否则返回false 			if(item.name.includes(keywords)) { 				return item; 			}   })  }   } })  </script>

（时间格式那边可能不太标准，可用过滤器替换）

上一个：24小时营业的动物医院 全天24小时营业动物医院(宠物医院)

下一个：宠物零食加工厂要投资多少钱 宠物零食加工厂要投资多少钱呢

热门文章

归纳