全国咨询热线:18720358503

完全免费微信小程序_vue中添加与删除要害字查找

类别:媒体报道 发布时间:2021-01-07 浏览人次:

vue中添加与删除关键字搜索功能       这篇文章主要介绍了vue中添加与删除,关键字搜索功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" title Document /title script src="npm/vue/dist/vue.js" /script /head body div id="app" div label Id: input type="text" v-model='id' /label label for="" Name: input type="text" v-model='name' @keyup.enter='add' /label input type="button" value="添加" @click='addBtnFlag add()' input type="text" v-model='keywords' id="search" v-focus v-color /div !-- 注意: v-for 循环的时候 , key 属性只能使用 number获取string -- !-- 注意:key 在使用的时候,必须使 v-bind 属性绑定的形式 指定 key 的值 -- !--在组件中,使用v-for循环的时候,或者在一些特殊的情况中,如果 v-for 有问题 ,必须 在使用 v-for 的同时 ,指定 唯一的字符串/数字 类型 :key 值 -- !-- v-for 中的数据,都是直接从 data 上的 list 中直接渲染过来的 -- !-- 自定义一个 search 方法,同时 ,把所有的关键词,通过传参的形式,传递给了 search 方法 -- !-- 在 search 方法内部,通过 执行 for 循环,把所有符合 搜索关键字的数据,保存到 一个新数组中 返回 -- p v-for='item in search(keywords)' :key="item.id" input type="checkbox" {{item.id}}---- {{item.name}} !-- a @click='shift(index)' 删除 /a -- ----------------- a @click.prevent="del(item.id)" 删除 /a /div script //使用 Vue.directive() 定义全局的指令 v-focus //其中:参数1:指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀, //但是:再调用的时候,必须 在指令名称前面 加上 v- 前缀来进行调用 //参数2:是一个对象,这个对象身上,有一些指令相关的函数可以在特定的阶段,执行相关的操作 Vue.directive('focus', { bind: function (el) { //每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次 //注意:在每个 函数中,第一个参数,永远是 el , 表示 被绑定了指令的那个元素,这个 el 参数,是一个原生的的JS对象 //在元素 刚绑定了指令的时候,还没有 插入到 DOM 中去,这时候,调用focus 方法没有作用 //因为,一个元素,只有插入DOM之后,才能获取焦点 el.focus() inserted: function (el) { //inserted 表示元素 插入到DOM中的时候,会执行 inserted 函数【触发一次】 el.focus() updated: function (el) { //当VNode更新的时候 会执行updated 可能会触发多次 Vue.directive('color',{ bind: function (el) { el.style.color = 'red' var vm = new Vue({ el: "#app", data: { id: '', name: '', keywords: '',//关键词 addBtnFlag:true, list: [ { id: 1, name: '奥迪' }, { id: 2, name: '宝马' }, { id: 3, name: '奔驰' }, { id: 4, name: '玛莎拉蒂' }, { id: 5, name: '保时捷' }, { id: 6, name: '五菱宏光' } methods: { add() { // this.list.push({ id: this.id, name: this.name }) if( this.id == ''){ this.addBtnFlag=false }else{ var car = { id: this.id, name: this.name } this.list.push(car) this.id = this.name = '' del(id) { //根据ID删除 // this.list.some((item,i)= { // if(item.id == id){ // this.list.splice(i,1) // return true; // } // }) var index = this.list.findIndex(item = { if (item.id == id) { return true; this.list.splice(index, 1) search(keywords) { //根据关键字,进行数据的搜索 // var newList = [] // this.list.forEach(item = { // if(item.name.indexOf(keywords) != -1){ // newList.push(item) // } // }) // return newList //注意:forEach some filter findIndex 这些都是属于数组的新方法, //都会对数组中的每一项,进行遍历,执行相关的操作; return this.list.filter(item = { //if(item.name.indexOf(keywords) != -1) //注意:ES6中,为字符串提供了一个新的方法,叫做 string.prototype.includes('要包含的字符串') //如果包含,则返回 true 否则返回false //contain if (item.name.includes(keywords)) { return true // return newList /script /body /html

总结

以上所述是小编给大家介绍的vue中添加与删除关键字搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


推荐阅读

完全免费微信小程序_vue中添加与删除要害字查找

vue中加上与删掉重要字检索作用 本文关键详细介绍了vue中加上与删掉,重要字检索作用,文中根据案例编码给大伙儿详细介绍的十分详尽,具备一定的参照效仿使用价值,必须的朋...

2021-01-07
网站首页设计如何满足网站优化需求

优良的网页页面合理布局及编码提升对客户感受的提高起积极主动的推动功效,自然一个浑然同创的网页页面感观对SEO来讲也是一项不能或缺的岗位专业技能,在建立网站设计方案提升...

2021-01-07
广州凡科互联网科技股份有限公司招聘(双地铁

招聘人数:4职位信息1.具备一定的英语基础,书面英语熟练;2.熟悉一般计算机操作,熟悉photoshop等常用办公室软件,掌握基本图片处理技巧;3.对电子商务电子平台有一定了解,有阿里...

2021-01-07
广州凡科互联网科技股份有限公司招聘网络销售

招聘人数:17职位信息我们的课程产品:语言类,游戏类、平面设计、声乐类,美术类,服装设计类。平台/工作账号:腾讯、快手、抖音、小红书、潭州课堂APP,淘宝、天猫工作内容:...

2021-01-07
广州凡科互联网科技股份有限公司招聘拼多多运

招聘人数:10职位信息要求从事【拼多多运营】1年左右经验1.负责平台店铺的整体规划、营销、推广、客户关系管理等系统经营性工作,与公司各部门的沟通协调工作;2、保证店铺的正...

2021-01-07
广州凡科互联网科技股份有限公司招聘中国移动

招聘人数:10职位信息中国移动客服专员(天河)中国移动外呼营销项目要主是对用户进行移动相关业务的电话营销、业务通知、市场调查、客户回访等外呼工作。项目薪酬福利优越,职...

2021-01-07
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信