刚进入的时候光标可以直接选中搜索关键字
成功添加id和name
通过关键词马，可以对内容进行筛选
点击对应的品牌进行删除，删除成功
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="Vue.min.js"></script>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" style="text-align:center">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label style="margin-left:5px;">
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label style="margin-left:5px;">
Name:
<input type="text" class="form-control" v-model="name" @keyup.enter='add'>
</label>
<!--函数加了小括号是为了传参-->
<input type="button" value="添加" class="btn btn-primay" style="margin-left:5px;" @click="add()">
<label style="margin-left:5px;">
搜索名称关键字:
<input type="text" class="form-control" v-model="keywords" v-focus>
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped" style="margin-top:10px;">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime|dataFormat('')}}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
Vue.filter('dataFormat', function (dateStr, pattern = "") {
var dt = new Date(dateStr)
var y = dt.getFullYear()
var m = dt.getMonth() + 1
//var m = (dt.getMonth() + 1).toString().padStart(2, '0')
//补0的方法，因为版本问题用不了padstart方法
var d = dt.getDate()
if (pattern.toLowerCase() === "yyyy-mm-dd") {
return `${y}-${m}-${d}`
} else {
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss} `
}
})
var vm = new Vue({
el: '#app',
data: {
id: "",
name: "",
keywords: "",
list: [{
id: 1,
name: '奔驰',
ctime: new Date()
},
{
id: 2,
name: '宝马',
ctime: new Date()
},
]
},
methods: {
add() {
var car = {
id: this.id,
name: this.name,
ctime: new Date()
}
this.list.push(car)
this.id = this.name = ""
},
del(id) {
this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1)
return true;
}
})
},
search(keywords) {
// var newList = []
// this.list.forEach(item => {
// if (item.name.indexOf(keywords) != -1) {
// newList.push(item)
// }
// })
// return newList
return this.list.filter(item => {
if (item.name.includes(keywords)) {
return item
}
})
}
}
})
</script>
</body>
</html>
添加动画效果的代码
（因为功能类似就不重新写一篇新的博客了）
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="Vue.min.js"></script>
<style>
li {
border: 1px dashed #999999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 12px;
width: 100%;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.6s ease;
}
li:hover {
background-color: aquamarine;
transition: all 0.8s ease;
}
.v-move {
transition: all 0.6s ease;
}
.v-leave-active {
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<div>
<label>
Id:
<input type="text" v-model="id">
</label>
<label>
Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}}---{{item.name}}
</li>
</transition-group>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: "",
name: "",
list: [{
id: 1,
name: '赵高'
},
{
id: 2,
name: '秦桧'
},
{
id: 3,
name: '严嵩'
},
{
id: 4,
name: '魏忠贤'
},
]
},
methods: {
add() {
this.list.push({
id: this.id,
name: this.name
})
},
del(i) {
this.list.splice(i, 1)
}
}
})
</script>
</body>
</html>
