绝美宋词

合集 - 蓝桥杯(21)

1.逃离二向箔2023-06-022.偷梁换柱2023-06-023.课程列表2023-06-024.粒粒皆辛苦2023-06-025.成语学习2023-06-026.消失的 Token2023-06-027.芝麻开门2023-06-028.资讯接口2023-06-029.防抖函数2023-06-0310.element-ui 组件二次封装2023-06-0411.心愿便利贴2023-06-0412.购物车2023-06-04

13.绝美宋词2023-06-04

14.布局切换2023-06-0515.和手机相处的时光2023-06-0516.天气趋势2023-06-0517.阅读吧2023-06-0518.宝贵的一票2023-06-0819.大电影2023-06-0820.封装 Promisefy 函数2023-06-0821.权限管理2023-06-08

收起

习题链接

绝美宋词

任务

我有唐诗三百首，但是我想查找某一首诗，总不能一首一首查吧
所以我们要完成一个搜索功能模块，无论是诗句，还词牌，或者作者一并查出
并且要对查出来的数据进行高亮显示

关键点

1. 在mounted生命周期中完成数据请求
   1. axios请求数据的
   2. axios中最常用的就是get与psot，axios是基于promise的异步操作，所以是可以是使用then,catch方法来处理结果的，在本题里面就是一个简单 请求
   3. axios.get(地址)
      .then(res=>{当请求成功，返回的结果在此处操作})
      .catch(err=>{执行失败的操作})
      .finally(()=>{成功或失败都将执行的操作})
2. 正则表达式和eval的共同使用
   1. 在正则表达式的简写中想插入变量是不可能的，但是配合eval就可以了
   2. eval可以将字符串当成JS代码进行执行
   3. 一个句子里面可能存在多个匹配的字符所以用正则比较合适（本次解决方案使用的正则），再提供一种方案自己实现使用indexOf与while进行实现
3. 使用replace方法
   1. 此方法不会修改原数组
   2. 匹配到的字符，可以使用$&字符进行实用，比如说你要匹配的"柳",再替换的字符串中使用$&就是对应的"柳"
4. v-html指令，因为存在高亮标签，所以需要使用v-html对字符串进行html渲染
5. watch使用监听器
   1. 因为每当查询条件发送变化的时候，需要触发一次查询
   2. 每次查询的结果基本上是不一致的所以不使用计算属性进行缓存

代码实现 && 完整的代码

1. data中存在的数据

    data(){
        return {
          listdata:[],     // 所有的数据
          searchText:"",   // 查询字符串
          active:[]        // 查询结果
        }
    },
   

2. 请求数据编写

   mounted(){
       axios.get("./data.json").then(res=> this.listdata = res.data )
   }
   

3. 进行查询结果并拼接高亮标签

   watch:{
       searchText(){ 
         console.log(this.searchText);
         let arr = this.listdata.filter(item=>{
           let b = false;
           for (const key in item) { 
             let index = item[key].indexOf(this.searchText);
             if(index != -1){
               b = true; 
               item[key] = item[key].replace(eval(`/${this.searchText}/gi`),`<span class="highlight">$&</span>`)
             }
           } 
           return b;
         })
         // active是在data中进行声明的
         this.active = arr;
       }
   }, 
   

4. 对查询结果进行渲染

    <div class="search-form">
      <input v-model="searchText" type="text" id="search" class="search" placeholder="词牌名 词句 词人"/>
      <ul class="suggestions">
        <li v-for="item,index in active">
          <span class="poet" v-html="item.poetry_content"></span>
          <span class="title"><span v-html="item.title"></span> - <span v-html="item.author"></span></span>
        </li>
      </ul> 
    </div>
   

__EOF__

本文作者：GTK
本文链接：https://www.cnblogs.com/DnmyCourage/p/17455731.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！