人员管理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" />
</head>
<body>
<div class="container">
<div id="app">
<div>
id:<input type="text" v-model="id">
name:<input type="text" v-model="name">
<input type="button" class="btn btn-primary" value="添加" @click="add">
<input type="text" placeholder="关键词" v-model="keyword" />
</div>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>Id</th>
<th>名字</th>
<th>注册日期</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="product in search(keyword)" :key="product.id">
<td><input type="checkbox"></td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.date}}</td>
<td><button class="btn btn-danger" @click="del(product.id)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
id: null,
name: null,
keyword: '',
products: [{},
]
},
methods: {
add() {
var product = {
id: this.id,
name: this.name,
date: new Date()
};
this.products.push(product);
},
del(id) {
this.products.some((data, index) => {
if (id == data.id) {
this.products.splice(index, 1);
return true;
}
});
},
search(keyword) {
return this.products.filter(item => {
var valueArray = Object.values(item);
var valueString = valueArray.join('');
return valueString.includes(keyword);
});
}
}
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
