您的位置：首页 > Web前端 > Vue.js

【Vue案例二】实现对表单数据的添加、删除以及关键字查询操作

2020-08-27 21:36 1116 查看

本文我们通过一个小案例来巩固一下前面学到的内容，即实现对表单数据的添加，删除和关键字查询的操作，具体案例效果如下：

<!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>

数组常用的循环方法比较：

循环方法	说明
forEach	不可终止循环
some	返回true终止循环
findIndex	返回true可以终止循环，返回满足条件的索引
filter	过滤数组，返回过滤后的数组

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航