vue实现一个纯前端的crud增删改查列表效果代码
代码语言:html
所属分类:布局界面
代码描述:vue实现一个纯前端的crud增删改查列表效果代码,在浏览器端实现,没有使用后台接口
代码标签: 纯 前端 的 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="dat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0