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