vue实现一个纯前端的crud增删改查列表效果代码-html代码-BFW代码库

vue实现一个纯前端的crud增删改查列表效果代码

代码语言：html

代码描述：vue实现一个纯前端的crud增删改查列表效果代码，在浏览器端实现，没有使用后台接口

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
		<title>form</title>
		<style type="text/css">
			#table table {
				width: 100%;
				font-size: 14px;
				border: 1px solid #eee
			}
			
			#table {
				padding: 0 10px;
			}
			
			table thead th {
				background: #f5f5f5;
				padding: 10px;
				text-align: left;
			}
			
			table tbody td {
				padding: 10px;
				text-align: left;
				border-bottom: 1px solid #eee;
				border-right: 1px solid #eee;
			}
			
			table tbody td span {
				margin: 0 10px;
				cursor: pointer;
			}
			
			.delete {
				color: red;
			}
			
			.edit {
				color: #008cd5;
			}
			
			.add {
				border: 1px solid #eee;
				margin: 10px 0;
				padding: 15px;
			}
			
			input {
				border: 1px solid #ccc;
				padding: 5px;
				border-radius: 3px;
				margin-right: 15px;
			}
			
			button {
				background: #008cd5;
				border: 0;
				padding: 4px 15px;
				border-radius: 3px;
				color: #fff;
			}
			
			#mask {
				background: rgba(0, 0, 0, .5);
				width: 100%;
				height: 100%;
				position: fixed;
				z-index: 4;
				top: 0;
				left: 0;
			}
			
			.mask {
				width: 300px;
				height: 250px;
				background: rgba(255, 255, 255, 1);
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				z-index: 47;
				border-radius: 5px;
			}
			
			.title {
				padding: 10px;
				border-bottom: 1px solid #eee;
			}
			
			.title span {
				float: right;
				cursor: pointer;
			}
			
			.content {
				padding: 10px;
			}
			
			.content input {
				width: 270px;
				margin-bottom: 15px;
			}
		</style>
	</head>

	<body>
		<div id="table">
			<div class="add">
				<input type="text" v-model="addDetail.title" name="title" value="" placeholder="标题" />
				<input type="text" v-model="addDetail.user" name="user" value="" placeholder="发布人" />
				<input type="date" v-model="addDetail.dates" name="date" value="" placeholder="发布时间" />
				<button @click="adddetail">新增</button>
			</div>
			<table cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<th>序号</th>
						<th>标题</th>
						<th>发布人</th>
						<th>发布时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in newsList">
						<td width="5%">{{index+1}}</td>
						<td>{{item.title}}</td>
						<td width="10%">{{item.user}}</td>
						<td width="15%">{{item.dates}}</td>
						<td width="10%"><span @click="deletelist(item.id,index)" class="delete">删除</span><span class="edit" @click="edit(item)">编辑</span></td>
					</tr>
				</tbody>
			</table>
			<div id="mask" v-if="editlist">
				<div class="mask">
					<div class="title">
						编辑
						<span @click="editli.........完整代码请登录后点击上方下载按钮下载查看