小测试_测试下0529长-CSDN博客

本文链接：https://blog.csdn.net/jerry0529/article/details/102966880

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
		<script src="js/vue.js"></script>
	</head>
	<body>
	<div class="container">
		<div id="puma">
			<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-hover">
			    <thead>
			    <tr>
					<th><input type="checkbox" /></th>
			        <th>Id</th>
			        <th>名字</th>
			        <th>工作</th>
					<th>操作</th>
			    </tr>
			    </thead>
			    <tbody>
			    <tr v-for="manage in manages" :key="manage.id">
					<td><input type="checkbox" /></td>
			        <td>{{manage.id}}</td>
			        <td>{{manage.name}}</td>
			        <td>{{manage.work}}</td>
					<td><button class="btn btn-danger" @click="del(manage.id)">删除</button></td>
			    </tr>
			    </tbody>
			</table>
		</div>
	</div>
		<script type="text/javascript">
			Vue.filter('formatDate', data => {
			        if (data == null || data == '') {
			            return '';
			        }
			        var date = new Date(data);
			        var dateStr = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
			        return dateStr;
			    });
			var vm = new Vue({
				el: '#puma',
				created() {
					this.manages = JSON.parse(localStorage.getItem("manages")|| '[]');
				},
				data: {
					id: null,
					name: null,
					// keyword: '',
					manages: [
						{id: 1,name: '张三',work: '职员'},
						{id: 2,name: '李四',work: '经理'},
						{id: 3,name: '王全蛋',work: '董事'},
					]
					
				},
				methods: {
					add() {
						var manage = {
							id: this.id,
							name: this.name,
							work: this.Work,
						};
						this.manages.push(manage);
						localStorage.setItem("manages",JSON.stringify(this.manages));
					},
					del(id) {
						this.manages.some((data,index) => {
							if(id == data.id) {
								this.manages.splice(index,1);
								return true;
							}
						});
						localStorage.setItem("manages",JSON.stringify(this.manages));
					}
					
				}
			});
		</script>
	</body>
</html>