Vue增删查练习Demo,附上解析源码

置顶柠夏小白

已于 2022-02-23 15:33:46 修改

阅读量317

点赞数 1

分类专栏：趣味Vue 文章标签：前端 javascript css html vue.js

于 2021-12-26 21:03:30 首次发布

本文链接：https://blog.csdn.net/a2417841572/article/details/122160826

版权

趣味Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue2.0温习</title>
		<link rel="stylesheet" type="text/css" href="bootstrap.css" />

		<style>
			p {
				text-align: center;
				font-size: 16px;
				color: #C2E9E7;
				font-weight: bold;
				margin-top: 30px;
			}

			#css {
				height: 33px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- form表单元素有submit事件 提交时不触发网页刷新-->
			<form @submit.prevent="Add">
				<p>恭贺您成为我们公司产品研发部门的一员！</p>
				<label>
					<!-- v-model.trim防止空格出现 -->
					<input type="text" id="css" placeholder="请输入你所需的开发者：" v-model.trim="staff"/>
					<button type="submit" class="btn btn-danger">添加</button>
				</label>
				<table class="table table-striped">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>岗位</th>
							<th>当前状态</th>
							<th>当前时间</th>
							<th>人事变动</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in position" :key=item.id>
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.post}}</td>
							<td>
								<div>
									<input type="checkbox" v-model="item.stastus" :id="'cb'+item.id" />
									<label :for="'cb'+item.id" v-if="item.stastus">上班中</label>
									<label :for="'cb'+item.id" v-else>休假中</label>
								</div>
							</td>
							<td>{{item.time | times}}</td>
							<td><a href="#" class="btn btn-default" @click="Del(item.id)">炒鱿鱼</a></td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
		<script src="./dayjs.min.js"></script>
		<script src="./vue.js"></script>
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					staff:'',
					//nextId是下一个，可用的id
					nextId:5,
					position: [{
							id: 1,
							name: "小麦",
							post: "Java开发",
							stastus: false,
							time: new Date()
						},
						{
							id: 2,
							name: "翰林",
							post: "Web开发",
							stastus: true,
							time: new Date()
						},
						{
							id: 3,
							name: "晨星",
							post: ".Net开发",
							stastus: true,
							time: new Date()
						},
						{
							id: 4,
							name: "柠夏",
							post: "实施工程师",
							stastus: false,
							time: new Date()
						},
					]
				},
				methods: {
					Del(id) {
						if (confirm('你确定要开除此员工吗？')) {
							return this.position = this.position.filter(item => item.id !== id)
						}
					},
					//阻止表单的默认提交行为之后， 触发add方法
					Add(){
						//如果判断到staff的值为空字符串，则return出去
						if(this.staff === "") return alert('必须填写部门同事o!')
						//如果没有被return出去，应该执行添加的逻辑
					
						//1.先把要添加的部门同事，整理出来
						let obj={
							id:this.nextId,
							name:this.staff,
							post:"HRBP",
							stastus:true,
							time:new Date()
						}
						//2.往this.position数组中的push步骤1得到的对象
						this.position.push(obj)
						//3.清空this.staff，让this.staff自增+1
						this.staff = ''
						this.nextId++
					},
				},
				
				filters: {
					//1.对time进行格式化处理，得到YYYY-MM-DD HH:mm:ss
					//2.把格式化的结果 return出去

					//注意：直接调用dayjs()得到的是当前的时间
					//dayjs（给定的日期时间）得到指定的日期
					times(time) {
						let Nowtime = dayjs(time).format('YYYY-MM-DD HH:mm:ss')
						return Nowtime
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

柠夏小白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue增删查练习Demo,附上解析源码

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue2.0温习</title> <link rel="stylesheet" type="text/css" href="bootstrap.css" /> <style> p { text-align: center; font-size: 16px
复制链接

扫一扫

专栏目录