<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 导入Vue包 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<!-- 引入bootstrap工具库，快速实现页面布局 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<!-- 在bootstrap工具库中直接使用布局样式 -->
<h3 class="alert alert-primary" role="alert">热销水果</h3>
<div class="form-inline mx-sm-3" style="font-Size: 20px;">
<!-- 通过v-model指令将id和name输入框的信息和vm中的id和name绑定 -->
ID: <input type="text" class="form-control" v-model='id'>
Name: <input type="text" class="form-control" v-model='name'>
<!-- 给"添加按钮"绑定点击事件 -->
<button class="btn btn-primary mx-sm-3" @click='add'>添加</button>
<!-- 通过v-model指令将keywords搜索框的信息和vm中的keywords绑定 -->
搜索名称关键字: <input type="text" class="form-control" v-model='keywords'>
</div><br>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Time</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<!-- v-for循环中添加search方法，调用方法返回的信息 -->
<tr v-for='item in search(keywords)' :key='item.id'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<!-- 给"删除链接"绑定点击事件，注意要使用.prevent修饰符阻止a标签的默认行为 -->
<td><a href="" @click.prevent='del(item.id)'>删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
keywords: '',
list: [
{ id: 1, name: '苹果', time: new Date() },
{ id: 2, name: '橘子', time: new Date() },
{ id: 3, name: '香蕉', time: new Date() }
]
},
methods: {
add() {
// 添加的数据记录到list中
this.list.push({ id: this.id, name: this.name, time: new Date() })
//将输入框置空
this.id = this.name = ''
},
// 删除记录的实现逻辑：点击删除链接，获取要删除记录的id，然后调用数组的splice方法来移除记录
del(id) {
// 通过数组的some方法来循环判断
this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1);
// 返回true，终止循环
return true;
}
})
// 也可以通过findIndex方法来获取要删除数据的索引
// var index = this.list.findIndex(item=>{
// if(item.id==id){
// return true
// }
// })
// //通过splice方法来移除记录
// this.list.splice(index,1)
},
search(keywords) {
// 保存新的数组
var newList = []
this.list.forEach(item => {
// 判断循环的记录中是否包含查询的关键字
if (item.name.indexOf(keywords) != -1) {
// 将循环的记录添加到新的数组中
newList.push(item)
}
})
// 返回数组信息
return newList
// 也可以通过filter方法返回满足条件的数组
// return this.list.filter(item=>{
// if(item.name.includes(keywords)){
// return item
// }
// })
}
}
})
</script>
</body>
</html>