<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品牌列表</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading"><p class="panel-title">添加品牌</p></div>
<div class="panel-body form-inline">
<label>
ID:<input class="form-control" type="text" v-model='id'>
</label>
<label>
NAME:<input class="form-control" type="text" v-model='name' @keyup.enter='add'>
</label>
<input class="btn btn-primary" type="button" value="添加" @click='add'>
<label>
请输入关键字:<input class="form-control" type="text" v-model='keyWords' v-focus>
</label>
</div>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Time</th>
<th>Opration</th>
</tr>
</thead>
<tbody>
<tr v-for = "item in search(keyWords)" :key='item.id'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{ item.timer | dataFormrt }}</td>
<td><a href="#" @click.prevent='del(item.id)'>删除</a></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.min.js"></script>
<script type="text/javascript">
Vue.config.keyCodes.enter=13;
let vm = new Vue({
el:'#app',
data:{
list:[
{id:1,name:'兰博基尼',timer:new Date()},
{id:2,name:'劳斯莱斯',timer:new Date()},
{id:3,name:'宝马',timer:new Date()},
{id:4,name:'奔驰',timer:new Date()},
{id:5,name:'野马',timer:new Date()},
{id:6,name:'保时捷',timer:new Date()},
{id:7,name:'奥迪',timer:new Date()},
],
id:'',
name:'',
keyWords:''
},
methods:{
del(id){
this.list.some((element,index)=>{
if (element.id == id) {
console.log(element.id == id);
this.list.splice(element,1)
}
})
},
add(){
if (!this.id || !this.name) return false
console.log(this.id,this.name)
this.list.unshift({id:this.id,name:this.name,timer:new Date()})
},
search(keyWords){
return this.list.filter((item, i)=> {
if (item.name.includes(keyWords)) {
return item;
}
});
}
},
filters:{
'dataFormrt':function (data) {
let dt = new Date(data);
let y = dt.getFullYear();
let m = (dt.getMonth()+1).toString().padStart(2,'0');
let d = dt.getDate().toString().padStart(2,'0');
let h = dt.getHours().toString().padStart(2,'0');
let mm = dt.getMinutes().toString().padStart(2,'0');
let s = dt.getSeconds().toString().padStart(2,'0');
return ` ${y}-${m}-${d} ${h}:${mm}:${s} `
}
},
directives:{
'focus':{
inserted:function (el) {
el.focus();
}
}
}
})
</script>
</body>
</html>
vue 实现品牌列表源码
最新推荐文章于 2022-06-21 14:43:39 发布