web蓝桥杯真题:绝美宋词

代码及注释:

html 复制代码
<!-- TODO:待补充代码 -->
<div class="search-form">
  <input type="text" v-model="search" id="search" @input="handleInput" class="search" placeholder="词牌名 词句 词人"/>
  <ul class="suggestions" >
    <li v-for="item in showList" v-key="item.poetry_content">    //循环
      <span class="poet" v-html="highlight(item.poetry_content)"></span>  //v-html指令渲染
      <span class="title" v-html="highlight(item.title) + '-' + highlight(item.author)"></span>
    </li>
  </ul>
</div>
javascript 复制代码
let vm = new Vue({
  el:'#app',
  // TODO:待补充代码
  data: {
    search: '',
    dataList: [],
    showList: []
  },
  mounted() {
    axios.get('./data.json').then(res => this.dataList = res.data)  //获取数据
  },
  methods: {
    handleInput() {
      this.showList = this.dataList.filter(item => {    //筛选含有关键字的数组
        for (const key in item) {        //循环对象,将含有关键字的对象返回
          if(item[key].includes(this.search)) {   
            return item
          }
        }
      })
      if (!this.search) {    //当关键字为0,数组为0
        this.showList = []
      }
    },
    highlight(text) {    //高光关键字
      return text.replaceAll(this.search, `<span class="highlight">${this.search}</span>`)
    }
  }
})

知识点:

1.v-html指令

它可以设置元素的 innerHTML 属性,从而实现 html 结构的解析和渲染

2.axios获取数据

javascript 复制代码
axios.get(url).then(res => console.log(res))

3.for...in

该循环将迭代对象本身的所有可枚举属性

javascript 复制代码
for (variable in object)
  statement
相关推荐
前端小巷子几秒前
Web开发中的文件下载
前端·javascript·面试
peakmain98 分钟前
Gradle 8.11.1的升级之旅
前端
一拳不是超人18 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa
KaneLogger20 分钟前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
前端风云志33 分钟前
JavaScript中如何遍历对象?
javascript
zwjapple7 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20209 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem9 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊10 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术10 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端