<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
* {
padding: 0;
margin: 0;
}
h5,em,i,b {
font-style: normal;
font-weight: normal;
}
ul>li {
list-style: none;
}
.top {
width: 99%;
border: 1px solid mediumblue;
border-radius: 8px;
overflow: hidden;
font-size: 16px;
text-indent: 20px;
line-height: 30px;
}
input {
width: 200px;
margin: 15px 5px;
height: 30px;
vertical-align: middle;
}
input[type=button] {
display: inline-block;
width: 80px;
height: 30px;
background: #f40;
color: #fff;
border: none;
outline: none;
font-weight: 600;
margin: 0 100px 0 20px;
}
.title {
background: mediumblue;
color: #fff;
height: 40px;
font-weight: 600;
line-height: 40px;
font-size: 16px;
}
.table {
width: 99%;
overflow: hidden;
border: 1px solid red;
border-radius: 6px;
margin: 10px auto;
text-align: center;
}
tr {
height: 30px;
}
tr:nth-child(2n) {
background: #ccc;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div id="app">
<div class="top">
<h5 class="title">添加品牌</h5>
ID:<input type="text" v-model="ids">
Name:<input type="text" v-model="names">
<input type="button" value="添加" @click="go">
要搜索的关键字:<input type="text" v-model="search">
</div>
<table class="table">
<tr>
<th>ID</th>
<th>NAME</th>
<th>TIME</th>
<th>ORTHER</th>
</tr>
<tr v-for="item in look(search)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td @click="re(item.id)"><a href="javascript:;">删除</a></td>
</tr>
</table>
</div>
<script src="../vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
ids:'', //ID框
names:'',//NAME框
search:'',//搜索框
//列表对象
list:[
{id:1,name:'张三',time:Date()},
{id:2,name:'李四',time:Date()},
{id:3,name:'王五',time:Date()},
{id:4,name:'赵六',time:Date()},
]
},
methods:{
// 添加方法
go:function () {
// 判断输入框是否为空
if(this.ids!=''&&this.names!=''){
var flag=true;
var that=this
// 循环判断id是否已存在
this.list.forEach(function (item) {
if(that.ids==item.id){
flag=false;
alert('ID已重复');
return;
}
})
// 添加至列表中
if(flag){
this.list.push({id:this.ids,name:this.names,time:Date()});
this.ids='';
this.names='';
}
}else{
alert('ID与NAME不能为空')
}
},
// 删除
re:function (id) {
var flag=confirm('是否删除此Tip?');
var that=this;
if(flag){
this.list.forEach(function (item,i) {
if(id==item.id){
that.list.splice(i,1);
return;
}
})
}
},
// 查找
look:function (search) {
var newList=[];
var that=this;
this.list.forEach(function (item) {
if(item.name.indexOf(that.search)!=-1){
newList.push(item);
}
})
return newList;
}
}
})
</script>
</body>
</html>
Vue中的添加、删除和搜索
猜你喜欢
转载自blog.csdn.net/Zyl_CN/article/details/82968763
今日推荐
周排行