08 增删查功能

2024-09-08 11:48

文章标签 功能 08 增删

本文主要是介绍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>