蓝桥杯-绝美宋词

最新推荐文章于 2024-07-08 18:51:22 发布

雨杰.

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量76

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_57464050/article/details/129893088

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>绝美宋词</title>
  <link rel="stylesheet" href="css/style.css" />
  <script src="./js/vue.min.js"></script>
  <script src="./js/axios.min.js"></script>
</head>

<body>
  <div id="app">
    <h1 style="text-align: center">输入关键字，找一首词</h1>
    <!-- TODO：待补充代码 -->
    <div class="search-form">
      <input type="text" id="search" class="search" placeholder="词牌名 词句 词人" v-model="keyword" />
      <ul class="suggestions">
        <!-- 每一首完整词句用一个 li 包裹 -->
        <li v-if="keyword.trim().length>0 && newList.length!==0" v-for="(item, index) in newList" :key="index">
          <span class="poet" v-html="highlight(item.poetry_content)">{{item.poetry_content}}</span>
          <span class="title">
            <span v-html="highlight(item.title)"></span>
            -
            <span v-html="highlight(item.author)"></span>
          </span>
        </li>
      </ul>
    </div>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      // TODO：待补充代码
      data() {
        return {
          keyword: '',
          list: [],
          newList: []
        }
      },
      async created() {
        const res = await axios.get('data.json')
        console.log(res);
        this.list = [...res.data]
      },
      watch: {
        keyword: function (val) {
          if (val.trim().length > 0) {
            console.log('keyword变化了');
            for (let i = 0; i < this.list.length; i++) {
              if (this.list[i].author.includes(val) || this.list[i].title.includes(val) || this.list[i].poetry_content.includes(val)) {
                // console.log(123);
                this.newList.push(this.list[i])
              }
            }
          } else {
            this.newList = []
          }
        }
      },
      methods: {
        highlight(content) {
          return content.replaceAll(this.keyword, `<span class="highlight">$&</span>`)
        }
      }
    })
  </script>
</body>

</html>