本文主要是介绍08 增删查功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
划重点：
- lable 标签
- keyup:键盘事件
- 标签内添加样式：style
- 使用事件修饰符：prevent
- forEach :遍历 数组
- indexOf: 可以返回要查询的某个字符串值在整个字符串中首次出现的位置下标
- findIndex:返回传入一个测试条件（函数）符合条件数组的首个元素的位置
- splice:向/从数组中添加/删除项目，然后返回被删除后的新的项目数组
黑椒蟹 一对：
<!DOCTYPE html>
<html lang="en"><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"><script src="./lib/vue-2.6.10.js"></script><title>增删查功能</title>
</head><body><div id="app"><h3 style="background-color: burlywood ; height: 50px;">添加/查询/删除功能 使用案例</h3><table ><tbody><th>Id:</th><th>Name:</th><th>Operation:</th></tbody></table><br><label>Id:<input type="text" v-model="id"></label><label>Name:<input type="text" v-model="name" @keyup.enter="add"></label><input type="button" value="添加" v-on:click="add"><input type="text" id="inputs" v-model="keywords" @keyup.enter="search">查询<br><p v-for="item in search1(keywords)" style="background-color: cadetblue" v-bind:key="item.id"><input type="checkbox">ID:{{ item.id }} Name:{{ item.name }}<!-- <input type="button" value="删除" v-on:click="del(item.id)"> --><a href="" @click.prevent="del(item.id)">删除</a></p><br><br><br><p v-for="item in newListData" style="background-color: cadetblue" v-bind:key="item.id"><input type="checkbox">ID:{{ item.id }} Name:{{ item.name }}<!-- <input type="button" value="删除" v-on:click="del(item.id)"> --><a href="" @click.prevent="del(item.id)">删除</a></p></div><script>var vm = new Vue({el: '#app',data: {id: null,name: null,keywords: '',listData: [{ id: 11, name: '宝马' },{ id: 12, name: '奔驰' },{ id: 13, name: '法拉利' }],newListData: [{ id: 1001, name: '宝马' }]},methods: {add() {if (this.id != null && this.name != null) {this.listData.push({ id: this.id, name: this.name })this.id = this.name = null}else {alert("请正确输入内容～～～")}},del: function (id) {var index = this.listData.findIndex((item) => {if (item.id == id) {return true}})return this.listData.splice(index, 1);},search() {var keywords = document.getElementById("inputs").value;alert(keywords)if (keywords == null) {return this.listData}var newList = [];this.listData.forEach(item => {if (item.name.indexOf(keywords) != -1) {newList.push(item)}});this.newListData = newListreturn newList},search1(keywords) {if (keywords == null) {return this.listData}var newList = [];this.listData.forEach(item => {if (item.name.indexOf(keywords) != -1) {newList.push(item)}});return newList}}})</script></body></html>运行图1：
运行图2：添加三个item
通过“红”关键字查询
这篇关于08 增删查功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
