企业制作网站一般多少钱,上海网站制作费用,亚马逊网站建设进度计划书,网络营销模式下品牌推广研究论文蓝桥杯前端Web赛道-输入搜索联想
题目链接#xff1a;1.输入搜索联想 - 蓝桥云课 (lanqiao.cn)
题目要求#xff1a; 题目中还包含effect.gif 更详细的说明了需求
那么观察这道题需要做两件事情
把表头的每一个字母进行大写进行模糊查询
这里我们会用到几个js函数#…蓝桥杯前端Web赛道-输入搜索联想
题目链接1.输入搜索联想 - 蓝桥云课 (lanqiao.cn)
题目要求 题目中还包含effect.gif 更详细的说明了需求
那么观察这道题需要做两件事情
把表头的每一个字母进行大写进行模糊查询
这里我们会用到几个js函数slice()includes()filter()toUpperCasetoLowerCase Array.prototype.slice() - JavaScript | MDN (mozilla.org) Array.prototype.includes() - JavaScript | MDN (mozilla.org) Array.prototype.filter() - JavaScript | MDN (mozilla.org) String.prototype.toUpperCase() - JavaScript | MDN (mozilla.org) String.prototype.toLowerCase() - JavaScript | MDN (mozilla.org) 以上链接可以让大家再复习一下这三个函数的用法这里我分享一个小技巧如果你实在记不住对于slice()的用法
可以直接在网页使用f12在控制台上直接输入代码会有非常清楚的提示下面是动画演示其实其他的函数也可以靠这个方法来试出它的用法但是前提是你知道过这个函数怎么用这只是起到一个让记忆回笼的作用 那么我们先完成第一个要求将表头的首字母变成大写
思路如下将原先单词的第一个字母变成大写字母然后把剩下的字母都拼接在一起
代码如下 td v-forcol in columns{{col.slice(0,1).toUpperCase() col.slice(1)}}/td在vue里{{}}内部也可以做计算我们可以直接在原地添加即可上面的动画已经演示过如何使用技巧取出我们需要的值这里就不过多赘述。
下一个要求是进行模糊查询我们可以使用filter()函数然后利用includes()进行判断的条件该函数会返回true和false而filter()也不会影响到原数据内容。
代码如下
tr v-forentry in this.data.filter((item)item.name.toLowerCase().includes(this.searchQuery.toLowerCase()))td v-forcol in columns{{entry[col]}}/td/tr我们可以看到vue是可以在v-for上直接计算再进行遍历的为什么要再这个地方进行一次toLowerCase()呢其实这是题目的一个要求之一因为题目要求的模糊查询是无视大小写的所以我们可以“曲线救国”干脆在进行判断的时候就把当前需要进行查询的字段name全都变为小写然后再把输入的内容也都全部变为小写这样操作也不会让原先的数据变化。
所以只需要判断当前的name是否含有input的内容如果包含就返回true然后通过filter函数找到所有满足这个条件的内容并把这个内容作为一个数组进行返回所以我们可以正常的在页面显示
至此达到题目要求值得注意的是不要忘了在input框对数据进行绑定不然不会生效哦 input placeholder输入要搜索的名字 v-modelsearchQuery/完整代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8 /title输入搜索联想/titlestyle typetext/css#app {width: 400px;height: 400px;margin: 50px auto;}table {border-collapse: collapse;border: 1px solid black;margin-top: 20px;}thead tr {background: #4d83d6;color: #fff;}tr td {width: 80px;line-height: 30px;text-align: center;}tbody tr:nth-child(2n) {background: #efefef;}/stylescript typetext/javascript src./js/vue.js/script/headbodydiv idapp!-- TODO请在下面实现需求 --span搜索名字: /spaninput placeholder输入要搜索的名字 v-modelsearchQuery/tabletheadtrtd v-forcol in columns{{col.slice(0,1).toUpperCase() col.slice(1)}}/td/tr/theadtbodytr v-forentry in this.data.filter((item)item.name.toLowerCase().includes(this.searchQuery.toLowerCase()))td v-forcol in columns{{entry[col]}}/td/tr/tbody/table/div/body
/html
script// TODO请在下面实现需求new Vue({el: #app,// 注意请勿修改 data 选项中的数据data: {searchQuery: ,columns: [name, gender, age],data: [{name: rick,gender: male,age: 21,},{name: demen,gender: male,age: 26,},{name: Jack,gender: male,age: 26,},{name: John,gender: female,age: 20,},{name: Lucy,gender: female,age: 16,},],},});
/script
