利用vue实现前端的人员管理

最新推荐文章于 2024-07-08 18:51:20 发布

fangfangFang_

最新推荐文章于 2024-07-08 18:51:20 发布

阅读量642

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fangfangFang_/article/details/102967621


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="container">
			<div id="app">
				<div>
					id：<input type="text" v-model="id">
					sex：<input type="text" v-model="sex">
					name：<input type="text" v-model="name">
					<input class="btn btn-primary" type="button" value="添加" @click="add">
				</div>
				<table class="table table-bordered table-striped table-hover">
					<thead>
						<tr>
							<!--td是tbody的列-->
							<!--th是thead下的列-->
							<th><input type="checkbox"></th>
							<th>Id</th>
							<th>性别</th>
							<th>姓名</th>
							<th>生日</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<!-- vue中页面和数据是双向绑定，所以数据变化页面中用到数据的地方也会变化-->
						<tr v-for="product in products">
							<!-- ：key给v-for绑定一个能标识此条记录唯一性的值，防止渲染的时候出现错误 -->
							<td><input type="checkbox" /></td>
							<td>{{product.id}}</td>
							<td>{{product.sex}}</td>
							<td>{{product.name}}</td>
							<td>{{product.birth|formatDate}}</td>
							<td><button class="btn btn-danger" @click="del(product.id)">删除</button></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<script src=js/vue.js> </script> <script>
			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: '#app',
				// created() {
				//localStorage只能储存字符串
				// this.products=JSON.parse(localStorage.getItem("products")||'[]');
				// localStorage表示把数据存在内存中
				// this.products=products;
				// },
				data: {
					id: null,
					sex: null,
					name: null,
					products:[]
					// products: [{
					// 		'id': '1',
					// 		'sex': '男',
					// 		'name': '张三'
					// 	},
					// 	{
					// 		'id': '2',
					// 		'sex': '男',
					// 		'name': '李四'
					// 	},
					// 	{
					// 		'id': '3',
					// 		'sex': '女',
					// 		'name': '无无'
					// 	}
					// ]
				},
				methods: {
					add() {
						var product = {
							id: this.id,
							sex: this.sex,
							name: this.name,
							birth: new Date(),
						}
						this.products.push(product);
					},

					del(id) {
						this.products.some((data, item) => {
							if (id == data.id) {
								this.products.splice(item, 1);
								return true;
							}
						})
					}
				},
			})
		</script>
	</body>
</html>