小测试

最新推荐文章于 2024-05-21 14:39:33 发布

weixin_43968515

最新推荐文章于 2024-05-21 14:39:33 发布

阅读量61

点赞数

本文链接：https://blog.csdn.net/weixin_43968515/article/details/102971529

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				id:<input type="text" v-model="id">
				name:<input type="text" v-model="name">
				<input class="btn btn-primary" type="button" value="添加" @click="add">
				<input type="text" placeholder="关键词" v-model="keyword">
			</div>
			<table class="table table-bordered table-striped table-striped table-hover">
				<thead>
					<tr>
						<!--td是tbody的列-->
						<!--th是thead下的列-->
						<th><input type="checkbox"></th>
						<th>Id</th>
						<th>名字</th>
						<th>创建日期</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!--v-bind:key绑定标识-->
					<tr v-for="pp in pps">
						<td><input type="checkbox"></td>
						<td>{{pp.id}}</td>
						<td>{{pp.name}}</td>
						<td>{{pp.date}}</td>
						<td><button class="btn btn-danger" @click="del(pp.id)">删除</button></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script src="js/vue.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					id:null,
					name:null,
					pps:[],
					keyword:'',
				},
				methods:{
					add(){
						var pp ={
							id:this.id,
							name:this.name,
							date:new Date(),
						};
						this.pps.push(pp)
					},
					del(id){
						this.pps.some((data,x)=>{
							if(id==data.id){
								this.pps.splice(x,1);
								return true;
							}
						});
					},
				}
			})
		</script>
	</body>
</html>