vue.js简单案例
- 通过vue.js实现增删改查
- 这个案例涉及了增删查
- html代码
<div id="app">
<div class="header_con">
<div class="header">
<h1>手机品牌管理</h1>
<input type="text" placeholder="请输入搜索条件" v-model.trim='keyWord'>
</div>
</div>
<div class="tb_title">
<h3>品牌列表</h3>
<a href="javascript:;" @click='isShow=true'>新增品牌</a>
</div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-for='(item,index) in search'>
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td>
<a href="#" class="del" @click='del(index)'>删除</a>
</td>
</tr>
<tr>
<td colspan=" 4" v-show='list.length==0'>没有品牌数据</td>
</tr>
</table>
<div class="add_con" v-show='isShow'>
<div class="add">
<h3>新增品牌</h3>
<div class="add_form">
<label>品牌名称:</label>
<input type="text" v-model.trim='msg' @keyup.enter='add()'>
</div>
<div class="btns">
<input type="button" value="取消" @click='isShow=false'>
<input type="button" value="添加" @click='add()'>
</div>
</div>
<div class="mask"></div>
</div>
</div>
moment插件下载
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="moment.js"></script>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '',
isShow: false,
list: [],
keyWord: ''
},
methods: {
add() {
if (this.msg == '') {
alert('不能为空');
return;
}
this.list.push({
name: this.msg,
time: moment().format('YYYY-MM-DD HH:mm:ss'),
});
this.isShow = false;
this.msg = ''
},
del(index) {
this.list.splice(index, 1)
}
},
computed: {
search: function () {
let newList = [];
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].name.indexOf(this.keyWord) != -1) {
newList.push(this.list[i])
}
}
return newList;
}
},
})
</script>
body {
margin: 0px;
}
.header_con {
height: 60px;
background-color: #101010;
overflow: hidden;
}
.header {
width: 960px;
margin: 0px auto;
overflow: hidden;
}
.header h1 {
margin: 0px;
padding: 0px;
font-size: 22px;
line-height: 60px;
font-weight: normal;
color: #f1f1f1;
letter-spacing: 1px;
float: left;
}
.header input {
float: right;
width: 240px;
height: 30px;
text-indent: 10px;
border-radius: 4px;
margin-top: 15px;
border: 0px;
outline: none;
}
.tb_title {
width: 960px;
height: 40px;
margin: 20px auto 0;
background-color: #3366cc;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.tb_title h3 {
margin: 0px;
padding: 0px;
line-height: 40px;
font-size: 16px;
font-weight: normal;
text-indent: 15px;
float: left;
color: #fff;
}
.tb_title a {
float: right;
text-decoration: none;
background-color: #f3cd57;
color: #2c2203;
padding: 5px 10px;
font-size: 12px;
border-radius: 4px;
margin: 7px 15px 0 0;
}
.tb_title a:hover {
border: 1px solid rgba(255, 255, 255, 0.6);
background-color: transparent;
color: #fff;
}
.tb {
border-collapse: collapse;
width: 960px;
margin: 0 auto;
}
.tb th {
background-color: #f1f1f1;
color: #333;
font-size: 14px;
}
.tb td,
.tb th {
padding: 10px 0;
border: 1px solid #999;
text-align: center;
}
.tb td {
color: #666;
font-size: 14px;
}
.del {
text-decoration: none;
color: #f90
}
.add {
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
width: 400px;
height: 200px;
background-color: #fff;
border: 1px solid #999;
border-radius: 4px;
z-index: 100;
}
.add h3 {
padding: 0px;
margin: 0px;
background-color: #3366cc;
color: #fff;
font-size: 16px;
font-weight: normal;
line-height: 40px;
text-indent: 15px;
}
.add_form {
margin: 30px 0 0 50px;
}
.add_form label {
font-size: 14px;
padding-right: 10px;
}
.add_form input {
width: 200px;
height: 24px;
border: 1px solid #ccc;
outline: none;
text-indent: 10px;
border-radius: 4px;
}
.btns {
border-top: 1px solid #ccc;
margin-top: 50px;
padding-right: 10px;
}
.btns input {
width: 62px;
height: 30px;
border: 1px solid #dadce0;
border-radius: 4px;
background-color: #fff;
float: right;
margin: 10px 10px 0 0;
outline: none;
cursor: pointer;
;
}
.btns input:last-child {
background-color: #669df6;
color: #fff;
border-color: #5793f6;
}
.mask {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 99;
}