用算法分析传统文化时最容易犯的错误：过度解读与数据偏见
2026/7/28 15:35:51
划重点：
- lable 标签
- keyup:键盘事件
- 标签内添加样式：style
- 使用事件修饰符：prevent
- forEach :遍历 数组
- indexOf: 可以返回要查询的某个字符串值在整个字符串中首次出现的位置下标
- findIndex:返回传入一个测试条件（函数）符合条件数组的首个元素的位置
- splice:向/从数组中添加/删除项目，然后返回被删除后的新的项目数组
黑椒蟹 一对：
<!DOCTYPEhtml><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>varvm=newVue({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){varindex=this.listData.findIndex((item)=>{if(item.id==id){returntrue}})returnthis.listData.splice(index,1);},search(){varkeywords=document.getElementById("inputs").value;alert(keywords)if(keywords==null){returnthis.listData}varnewList=[];this.listData.forEach(item=>{if(item.name.indexOf(keywords)!=-1){newList.push(item)}});this.newListData=newListreturnnewList},search1(keywords){if(keywords==null){returnthis.listData}varnewList=[];this.listData.forEach(item=>{if(item.name.indexOf(keywords)!=-1){newList.push(item)}});returnnewList}}})</script></body></html>